garden of the multiverse - VIP - Lara

SG Kram

Sat, 07 Dec 2024 11:17:48 +0100

verführerische Wintermarmelade

Zutaten

für 4 Gläser á 250ml

900 g Äpfel
Saft von 1 Zitrome
500 g Gelierzucker (2:1)
1 Msp. Zimt

Zubereitung

Die Gläser vorbereiten. Die äpfel schälen, entkernen und in kline Stücke schneiden. Die Apfelstücke mit Zitronensaft und Gielierzucker in einem großen Topf mischen und zum Kochen bringen. Die Rosinen dazugeben und unter Rühren ca. 4 Minuten sprudelnd kochen lassen. Den Topf von der Herdplatte ziehen und den Zimt unterrühren.

Die Marmelade nach der Gelierprobe zügig in die vorbereiteten Gläser füllen. Sofort verschließen, dann 5 Minuten auf den Kopf stellen. Kühl und dunkel aufbewahren.

Lesbarkeit erhöhen

Sat, 22 Jun 2024 12:23:47 +0200

In Rollenspielen steht das Lesen und Schreiben von Texten - zumeist in Romanform - im Fokus. Das bedeutet auch, dass diese Texte möglichst lesbar sein sollten. Dazu gehört allem voran die Schriftgröße, aber auch die Textausrichtung kann dem Auge schmeicheln.

Schriftgröße

Hier kommt es nicht auf die Größe per se an, sondern auf die Einheit, die man im CSS angibt. Geben wir die Schriftgröße in Pixeln (px) an, ist sie fest und für jeden gleich. Wollen wir das? Nur bedingt.
Idealerweise ermöglicht man, dass Leute über ihre Browsereinstellungen die Schriftgröße nach Belieben anpassen können und das geht nicht mit Pixeln. Dafür haben wir die Einheit rem - "root-em". Hier wird die Schriftgröße relativ zum root-Element gesetzt.
Browserstandard ist 16px. D.h. 1rem entspricht 16px, wenn wir nichts an unseren Einstellungen geändert haben. Mögen wir es kleiner, können wir das also individuell in unseren Browsereinstellungen anpassen, genauso wie andere sich die Schriftgröße anpassen können.

Code:
font-size: 1rem;

1.5rem sind dann 20px, denn wir nehmen hier die 16px mal 1,5. 2rem sind demnach also 32px usw.

Haben wir besonders große Schrift, die einen bestimmten Platz ausfüllen soll, können wir ruhig bei der Einheit px bleiben. Auch bei anderen Textelementen, die nicht wirklich gelesen werden sollen und nur gestalterische Elemente sind, kann man bei absoluten Angaben bleiben.

Da es in unserem Hobby nach wie vor etabliert ist, nicht allzu große Schriften zu wählen, kann ich durchaus verstehen, statt der 1rem vielleicht nur 0.9rem anzugeben. Ich würde allerdings empfehlen, dafür media-queries einzusetzen und die Schrift bei Auflösungen von über 1920px Breite auf 1rem zu setzen.

Code:
@media (min-width: 1930px) {

     body {

          font-size: 1rem;

     }

}

Browsereinstellungen

Firefox: Allgemein > Sprache und Erscheinung > Schriftarten & Farben > wahlweise rechts auf Erweitert > rechts unter Mindestschriftgröße
Chrome: Darstellung > Schriftgröße oder wahlweise Darstellung > Schriftart anpassen > Mindestgröße

Das Gute an dieser Einstellung ist, dass man so nur die Schriftgröße anpasst. Man muss also nicht in die Seite zoomen und dabei auch alle anderen Elemente vergrößern, sondern verändert wirklich nur die Schriftgröße.

Textausrichtung

Beliebt ist die Verwendung von Blocksatz, was ich auch persönlich sehr gerne mag und sowohl ästhetisch ansprechender finde, als auch beim Lesen angenehmer, weil es nicht so unruhig wirkt.

Code:
text-align: justify;

Silbentrennung

Ein Nachteil beim Blocksatz ist, dass zwischen den Wörtern größere Abstände entstehen können. Das sieht manchmal nicht nur doof aus, es wirkt auch irgendwie unordentlich. Das lässt sich aber auch mit CSS beheben, denn die meisten gängigen Browser können Worte einem Algorithmus entsprechend korrekt umbrechen, um gleichmäßige Abstände zu behalten.

Code:
hyphens: auto;

-webkit-hyphens: auto;

Auch wenn manche Browser die Sprache korrekt erkennen mögen, würde ich vorsichtshalber immer die Sprache beim html-Element setzen:

Code:

Ich würde die Silbentrennung übrigens nicht überall einsetzen, denn gerade bei gestalterischen Elementen kann es sein, dass das doof aussieht. Entsprechend würde ich also die Elemente, in denen die Posts und Infotexte sind, mit der Silbentrennung versehen und es nicht beim body-Element tun.

Responsivität mit media queries

Sat, 22 Jun 2024 12:22:34 +0200

In Zeiten von unterschiedlich großen Bildschirmen und der Verwendung von Smartphones wird Responsivität immer wichtiger und ist im Webdesign mittlerweile etablierter Standard. In Foren hat sich das leider noch nicht durchgesetzt und ich persönlich finde so extra Themes, die alle gestalterischen Elemente ausblenden, alles andere als schön. Das Volumen von Datenpaketen für Internet unterwegs ist mittlerweile auch ausreichend groß, dass man weder auf Bilder, noch auf anderen Schnickschnack verzichten muss - Leute spielen unterwegs Spiele, die mehr MB aufbrauchen, als eine Website, und haben am Ende des Monat immer noch was übrig.

Vorbereitung für MyBB

Damit dein Forum auch mobil bei korrekter Auflösung angezeigt wird und man nicht überall heranzoomen und herumschieben muss, gibt es eine kleine Änderung in der [inline-code]headerinclude[/inline-code], die vorgenommen werden muss. Folgende Zeile einfach hinzufügen:

Code:

Desweiteren solltest du einmal im CSS folgendes hinzufügen.

Code:
* {

    box-sizing: border-box;

    padding: 0;

    margin: 0;

}

Das bewirkt, dass wir gut mit Prozenten arbeiten können und [inline-code]padding[/inline-code] sowie [inline-code]border[/inline-code] nicht obendrauf gerechnet werden, sondern in [inline-code]width[/inline-code] und [inline-code]height[/inline-code] immer einberechnet sind.
D.h. habe ich eine [inline-code]width[/inline-code] von [inline-code]100px[/inline-code] und [inline-code]padding[/inline-code] von [inline-code]20px[/inline-code] bleibt die Breite bei [inline-code]100px[/inline-code] und wir haben einen inneren Abstand von [inline-code]20px[/inline-code]. Hätten wir die Änderung nicht, hätten wir insgesamt [inline-code]120px[/inline-code]. Beim Arbeiten mit Prozenten sehr lästig.

media queries

Responsivität lässt sich nicht bloß dadurch erzielen, dass wir für alles %, rem oder em verwenden, man kann auch weiterhin mit px arbeiten und auf sogenannte media queries zugreifen. D.h. wir wenden für verschiedene Bildschirm- bzw. Browserfenstergrößen unterschiedliches CSS an. Idealerweise haben wir einmal für alles CSS angegeben und überschreiben dann in den media queries ein paar Dinge für andere Größen.

Reihenfolge & Vorgehen

Nun gibt es zwei unterschiedliche Vorgehensweisen. Wir arbeiten uns vom kleinsten zum größten (mobile first) oder vom größten zum kleinsten. Da Foren in der Regel am Desktop aufgerufen werden, würde ich hier erst mal alles genau darauf anpassen und vielleicht sogar einen gemischten Weg gehen. D.h. ich würde das Theme erst mal auf deine Auflösung anpassen (wahrscheinlich 1920px breit mal 1080px hoch). Und dann würde ich mich einmal hoch und einmal runterarbeiten.

Heranziehen kann man dabei die Größen von Bootstrap. Das erwähne ich deshalb, weil ich es selbst nutze und es sich daher anbietet, das einzuhalten. Wenn man keinen Plan hat, welche Größen man nehmen soll, ist es sicherlich auch gut, das einfach als Orientierung zu nehmen.

Man kann die media queries direkt dort hinzufügen, wo man das Element definiert hat, man kann es aber auch alles in einem Schwung machen. Ich persönlich mach es beruflich so, dass ich ein Element style und direkt auch für kleinere Größen anpasse, also die media queries direkt beim Element hinzufüge (da benutze ich SCSS statt CSS, es ist also übersichtlicher).
Privat hingegen mache ich es so, dass ich mir im ACP an letzter Stelle eine mobile.css erstelle und dort alle media queries drin habe. Hier entwerfe ich Themes für den Desktop und passe diese erst später und nicht direkt an.

Werkzeuge

Im Browser hat man übrigens ein Werkzeug, mit dem man die Größe anpassen kann, ohne jedes mal das ganze Fenster kleinerziehen zu müssen. Einmal mit Strg + Shift + I den Inspektor öffnen (oder Rechtsklick > Untersuchen) und dann wird ein Fenster geöffnet, bei dem du erst mal dein HTML und CSS ansehen kannst. Der Inspektor kommt aber noch mit einem praktischen Tool: Bildschirmgrößen testen. Dafür gibt es recht weit oben ein Symbol, das wie ein Smartphone vor einem Tablet aussieht (oder Strg + Shift + M). Damit kannst du dir deinen Screen innerhalb des Browserfenster zurechtziehen oder auch vorgegebene Größen für bestimmte Tablets oder Smartphones auswählen.

Beispiel

Ich würde in jedem Fall immer mit Prozenten arbeiten, dann muss man nämlich nicht so viel anpassen. Also [inline-code]width: 100%;[/inline-code] ist bei mir absoluter Standard und das einzige, was ich anpasse, ist die [inline-code]max-width[/inline-code]. Das kann dann am Ende so aussehen:

Code:
.container {

  width: 100%;

  max-width: 1400px;

}

.content {

  width: 100%;

  padding: 100px;

}

/* screens >= 1930px */

@media (min-width: 1930px) {

  .container {

    max-width: 1600px;

  }

  .content {

    padding: 120px;

  }

}

/* screens < 1400px */

@media (max-width: 1399px) {

  .container {

    max-width: 1000px;

  }

  .content {

    padding: 80px;

  }

}

/* screens < 1200px */

@media (max-width: 1199px) {

  .container {

    max-width: 800px;

  }

  .content {

    padding: 60px;

  }

}

Das ermöglicht auch, die Reihenfolge bei der Anordnung von Elementen zu verändern, ohne die Elemente selbst zu verschieben. Das geht nämlich ganz einfach mit [inline-code]order[/inline-code].

Fehler und Warnungen: php8

Sat, 22 Jun 2024 12:22:00 +0200

Hallo und herzlich willkommen zu einer kleinen Erklärung und Hilfestellung bei Fehlern und Warnungen durch php8. MyBB ist mindestens seit Version 1.8.33 mit php8 kompatibel und es werden seitdem mit jedem Update sowohl Fehler, als auch Warnungen behoben. Spätestens seit Version 1.8.37 gibt es auch mit php8.2.9 keine Probleme.

Alles, was nicht funktioniert oder zu unerwünschtem Verhalten führt, fällt unter Fehler.
Alles, was funktioniert und lediglich Meldungen (meist oberhalb) des Forums auswirft, fällt unter Warnungen.

Wie verhalte ich mich bei Fehlern?

Werden die Fehler nicht durch etwas, das du selbst geschrieben hast, verursacht, gilt es, diese zu dokumentieren und an die Person weiterzuleiten, die die Funktion implementiert hat. Das kann das MyBB selbst, aber auch ein Plugin sein. Beschreibe, was du getan hast, um auf diesen Fehler zu stoßen und welches Verhalten du eigentlich erwartest. Es ist im Interesse der entwickelnden Person, sich solcher Fehler anzunehmen, also trete ruhig an diejenigen heran. Gibt es keinen Support mehr, also wird weder weiterentwickelt, noch Hilfe geleistet, kannst du dich auch immer an die breite Masse wenden.

Wie verhalte ich mich bei Warnungen?

Auch die kannst du den verantwortlichen Personen zukommen lassen, aber es hat in der Regel keine Priorität. Es sind Warnungen, keine Fehler. Alles funktioniert wie es soll, es wird lediglich davor gewarnt, dass etwas nicht den gängigen Standards entsprechend implementiert wurde (in der Zukunft zu Fehlern führen kann). Für dich als Person, die das nicht entwickelt hat, kann das im Prinzip egal sein.

Also, um dich zu beruhigen: Siehst du Warnungen, aber funktioniert alles, kannst du das einfach ignorieren und musst niemanden wild machen, du würdest Fehlermeldungen sehen. Es sieht einfach nur unschön aus, daher folgendes:

Logging ein oder aus?

Solange du selbst etwas entwickelst, ist es hilfreich, Fehler zu loggen und anzuzeigen. Bist du allerdings nur nutzende Person, also entwickelst du selbst keine Plugins sowie Funktionen und funktioniert alles, solltest du nichts loggen. Ich würde hier alles ausschalten, damit weder die [inline-code]error.log[/inline-code] vollläuft, noch irgendwas angezeigt wird, wenn dann doch mal eine Warnung dabei ist. Das kannst du in einem Spiegel- und Testforum machen, aber nicht dort, wo aktiv geschrieben wird und Leute deine Seite besuchen.

Fehlermeldung bei weißer Seite anzeigen

MyBB erfasst nicht alle Fehlermeldungen. So kann es vorkommen, dass dir einfach eine weiße Seite angezeigt wird und auch nichts in der [inline-code]error.log[/inline-code] steht. Um dir den Fehler anzuzeigen, ändere folgendes in der [inline-code]global.php[/inline-code].

Suche:

PHP-Code:

$working_dir = dirname(__FILE__); 

Füge darüber ein:

PHP-Code:

ini_set('display_errors', 1);

ini_set('display_startup_errors', 1);

error_reporting(E_ALL);

Warnungen selbst fixen

Manche Personen - mich eingeschlossen - mögen Warnungen nicht, auch wenn man sie getrost ignorieren könnte. Sie stören einfach, wenn man selber etwas entwickelt und dann erst mal filtern muss, welche Warnungen jetzt zum eigenen Plugin gehören und welche nicht (auch muss man deswegen manchmal ewig scrollen - ungünstig).
Daher hier eine kleine Erklärung, wie man Warnungen selbst beheben kann, die häufig vorkommen.

[inline-code]Undefined array key 'abc'[/inline-code]

Im Code sieht es so aus:

PHP-Code:

$variable['abc'] 

[inline-code]abc[/inline-code] ist der [inline-code]key[/inline-code] innerhalb des Arrays und enthält einen Wert ([inline-code]value[/inline-code]). Darauf können wir nur zugreifen, wenn er überhaupt existiert.

Unser [inline-code]Array[/inline-code] muss also mindestens so aussehen:

PHP-Code:

$variable = array('abc' => 'value'); 

Wie checken wir also, ob der [inline-code]key[/inline-code] überhaupt vorhanden ist? Da gibt es eine schöne Funktion, nämlich isset. Bevor wir unsere Variable also nutzen, überprüfen wir, ob es sie gibt, sie also nicht gleich [inline-code]null[/inline-code] ist:

PHP-Code:

isset($variable['abc']) 

Oder so, wenn wir nicht [inline-code]isset[/inline-code] verwenden wollen:

PHP-Code:

$variable['abc'] !== null 

Wird die Variable in einer [inline-code]if[/inline-code]-Bedingung verwendet, haben wir es einfach:

PHP-Code:

if ($variable['abc']) 

wird zu:

PHP-Code:

if (isset($variable['abc'])) 

Verwenden wir die Variable aber an anderer Stelle, müssen wir das gleiche selber einmal machen:

PHP-Code:

$name = $variable['abc']; 

wird zu:

PHP-Code:

$name = isset($variable['abc']) ? $variable['abc'] : "fallback"; 

Das [inline-code]"fallback"[/inline-code] ist das, was angezeigt wird, wenn unsere Variable nicht existiert. Bei einem Namen kann das ein [inline-code]String[/inline-code] sein, an anderen Stellen ist [inline-code]null[/inline-code] oder [inline-code]false[/inline-code] sinnvoller.

Das Fragezeichen und der Doppelpunkt sind übrigens nur eine Kurzschreibweise für das hier:

PHP-Code:

$name = "fallback";

if (isset($variable['abc'])) {

  $name = $variable['abc'];

}

Also übersetzt: wenn [inline-code]$variable['abc'][/inline-code] vorhanden, dann nimm [inline-code]$variable['abc'][/inline-code] ansonsten [inline-code]"fallback"[/inline-code].

[inline-code]Undefined variable $abc[/inline-code]

Das bedeutet, dass die Variable [inline-code]$abc[/inline-code] an einer Stelle verwendet wird, an der sie unbekannt ist. Also bspw. haben wir [inline-code]{$abc}[/inline-code] im Template stehen, aber in der php ist sie nur in einem [inline-code]if[/inline-code]-Scope oder einem [inline-code]while[/inline-code]-Loop vorhanden. Wir müssen sie auch außerhalb einmal beschreiben.
Wenn sie leer sein soll, dann machen wir das bspw. mit einem leeren String:

PHP-Code:

$abc = ""; 

Im Code sieht es dann etwa so aus:

PHP-Code:

$abc = "";

while (...) {

  $abc = ...;

}

Haben wir [inline-code]$abc[/inline-code] als [inline-code]if[/inline-code]-Bedingung, können wir übrigens wieder mit [inline-code]isset[/inline-code] checken, ob die Variable vorhanden ist:

PHP-Code:

if (isset($abc)) 

Bei MyBB tritt dieser Fall in der Regel mit [inline-code]while[/inline-code]-Loops in folgendem Kontext auf:

PHP-Code:

while ($character = $db->fetch_array($character_query)) {

  eval("\$character_bit = \"".$templates->get("irgendeintemplate")."\";");

}

Wie beheben wir das? So:

PHP-Code:

$character_bit = "";

while ($character = $db->fetch_array($character_query)) {

  eval("\$character_bit = \"".$templates->get("irgendeintemplate")."\";");

}

Inputs

Was immer mal wieder Probleme bereitet, ist die Art und Weise, wie Inputs angesprochen werden. Das sind die Eingabefelder von Formularen, in HTML sehen die so aus:

Code:

In Plugins werden sie dann oft folgendermaßen angesprochen, was allerdings zu Warnungen führen kann:

PHP-Code:

$mybb->input['abc'] 

Lösen lässt sich das, indem wir es einfach hiermit ersetzen:

PHP-Code:

$mybb->get_input('abc') 

Nicht in den Dateien herumwurschteln!

Und weil unsere Änderungen mit jedem Update immer wieder überschrieben werden würden, empfehle ich ganz klar, so etwas mit dem Plugin Patches umzusetzen. Sowohl bei MyBB selbst, als auch bei Plugins, die nicht unsere eigenen sind.

Dieser Thread ist sowohl eine Ergänzung zu diesem hier als auch eine knappe grobe Anleitung zur Selbsthilfe und Beruhigung der Nerven, wenn das Forum plötzlich ganz viele Warnungen auswirft, die man eigentlich ignorieren könnte. Außerdem bezieht es sich explizit auf php8, während nach wie vor noch viele Foren auf einer 7er Version laufen und es Bedenken bei der Umstellung gibt.

Es gibt noch viele andere Wege, Warnungen zu fixen und die hier aufgeführten sind nur Beispiele in den gängigsten Fällen und sollen lediglich als Orientierung dienen. Zum Fixen von Fehlern habe ich hier explizit nichts geschrieben, weil das viel komplexer ist und sich da jeweils ein eigener Thread im Supportbereich anbietet.

SG - Oktoberfest

Fri, 29 Sep 2023 15:06:00 +0200

LMS

LMS - Runde 1
[of contest titel="Craft Your Cool" bild="" deadline="05.10.2024"]
Erstelle einen schnieken Steckbrief für einen deiner Charaktere! Dein Code sollte alle wichtigen Infos enthalten – Name, Alter, Aussehen (Augenfarbe, Haarfarbe, Größe, Statur & besondere Merkmale), die wichtigsten Momente im Leben und vielleicht ein paar lustige Fakten. Jetzt kommt die Challenge: Binde mindestens zwei Bilder mit ein, die optisch gut zum Steckbrief passen. Das kann ein Porträt des Charakters sein oder etwas Ästhetisches, das zu ihm passt. Die Farben sollten die Stimmung deines Charakters widerspiegeln, also experimentiere mit Farben und Texturen, die das Ganze noch cooler machen!

Shortfacts:
- Steckbrief mit allen wichtigen Infos (Name, Alter, etc.)
- Mindestens 2 Bilder einbinden
- Farben und Texturen passend zum Charakter wählen
- Code Tag gern gesehen
[/of contest]

LMS - Runde 2
[of contest titel="Post It Like It's Hot" bild="" deadline="12.10.2024"]
Du schreibst coole Posts, aber sie sollen auch gut aussehen? Gestalte eine schicke Postvorlage! Integriere ein interaktives Element, wie zum Beispiel eine hover-Effekt oder einen kleinen animierten Teil, der das Design dynamischer macht. Vielleicht lässt sich der Name des Charakters beim Darüberfahren aufleuchten oder der Hintergrund verändert sich.

Shortfacts:
- Postvorlage
- Interaktives Element (z.B. Hover-Effekt) einbauen
- Code Tag gern gesehen
[/of contest]

LMS - Runde 3
[of contest titel="Relationship Roulette" bild="" deadline="19.10.2024"]
Unsere Charaktere haben jede Menge Beziehungen – Zeit, die mal richtig aufzuzählen! Erstelle ein Relationübersicht für einen deiner Charaktere, die zeigt, mit wem er gut kann und wen er nicht ausstehen kann. Verwende für jede Art von Beziehung einen eigenen Farbcode oder Symbol, um unterschiedliche Beziehungen darzustellen (mindestens 3 z.B. Positiv, Negativ, Neutralität). Füge zusätzlich eine kleine Legende hinzu, die deine Farbcodes oder Symbole erklärt.

Shortfacts:
- Relationübersicht
- Mindestens 3 Beziehungstypen
- Deutliche Unterscheidung der Beziehungstypen
- Legende für Farbcodes/Symbole
- Code Tag gern gesehen
[/of contest]

LMS - Runde 4
[of contest titel="Chatty Hour" bild="" deadline="19.10.2024"]
Lust auf ein bisschen Plauderei? Gestalte eine stylische Chat-Vorlage, die das Gefühl eines echten Messenger-Dienstes vermittelt! Integriere Bilder oder Icons der einzelnen Charaktere, damit ihre Persönlichkeiten gleich ins Auge springen. Nutze verschiedene Sprechblasen und Farbänderungen, um die Nachrichten der Charaktere klar zu trennen. Denk daran, das Layout ansprechend und kompakt zu gestalten, sodass es aussieht, als hätte man einen echten Chat geöffnet.

Shortfacts:
- Chat-Vorlage für Dialoge
- Farbänderungen für verschiedene Charaktere verwenden
- Code Tag gern gesehen (Vorschaubild/Verlinkung auf Codepen ist Ordnung)
[/of contest]

Avatarpersonen-Wünsche

Wed, 21 Jun 2023 18:40:02 +0200

Wünsche

~~Blake Livley~~ - glow (Hexe)
Phoebe Tonkin
Troian Bellisario
~~Lily James~~ - london
Crystal Reed
~~Abigail Cowen~~ - glow (Hexe)
~~Candice Accola~~ - pocketful
~~Danielle Rose Russell~~ - pocketful
Ester Expósito

Vielleicht Avatarpersonen

Elizabeth Lail
Holland Roden
Lucy Hale
Ashley Benson
Sophie Turner

Avatarpersonen - Pairs

Candice Accola & Jensen Ackles
Candice Accola & Joseph Morgan
Danielle Rose Russell & Daniel Sharman
Crystal Reed & Ian Somerhalder