Hilfe:Verbesserungsvorschläge/2023

Hier möchte ich wie 2020 schon alles sammeln, was ich im Forum zur Diskussion gestellt habe und irgendwie nicht abschließend gelöst wurde. Auf der MV2023 hat sich eine Arbeitsgruppe gebildet, die sich um Punkt 1.2. kümmern will.

Inhaltlich

Wiki-Struktur - Inhalte übersichtlich präsentieren

1. Ursprünglich bestanden unsere Übersichtsseiten aus Linklisten, die immer länger (und dadurch unübersichtlicher) wurden

2. Diese Linklisten würden durch fette „Überschriften“ und verschachtelte Listen gegliedert.

HTML

• Einstieg in HTML (Webseitengestaltung am Beispiel einer Schreinerei)
• Webprojekte planen
• Trennung von Inhalt, Präsentation und Verhalten erklärt, welche Rollen die Techniken HTML, CSS und JavaScript spielen.

CSS

• Einstieg in CSS
• Einstieg in Grid Layout
• fertige Layouts

JavaScript

• Einstieg in JavaScript
• Grundlagen der Programmierung

SVG

• Einstieg in SVG (Fotos werden als Rastergrafiken gespeichert - für alles andere wie Logos, Icons, Diagramme, etc gibt es SVG!)

HTTP

• Einstieg in HTTP Request und Response

Teaser-Text in der FAQ

3. In der FAQ (Adventskalender 2021) starteten wir mit kleinen passenden Icons rechts neben dem „Teaser“

→ Fazit: Ein Link benötigt eine kleine Erklärung; Ein gut erkennbares Icon wäre top!

Beispiele:

Wie kann ich erreichen, dass Verweise nicht unterstrichen werden?

„Ich möchte meine neue Webseite stylish haben - alles soll in einem eleganten Farbton gehalten sein!“

- Verweise sollten immer als solche erkennbar sein - am Besten mit mehreren Merkmalen!

• Wie sehen gute Links aus?

… Kopf- und Fußzeilen nicht mitdrucken?

• Print-CSS

Wie gestalte ich mehrspaltige Layouts mit CSS?

HEADER NAV MAIN ASIDE FOOTER

Wenn der Bildschirm breit genug ist, kann man Seitenelemente nebeneinander anordnen. Früher war das kompliziert - heute gibt es Grid Layout:

• CSS/Tutorials/Grid

Cards mit Grafiken

Einstieg in HTML

der Kurs für die ersten Schritte in HTML und CSS.
</>

am Beispiel einer Webseite für die (fiktive) Schreinerei Meier

Einstieg in CSS

* {
  color: red;
  margin: 1em;
}
Stylesheets für HTML und SVG

• Warum soll man überhaupt Layouts mit CSS festlegen?
• Wie werden Webseiten responsiv?

(Fotos werden als Rastergrafiken gespeichert - für alles andere wie Logos, Icons, Diagramme, etc gibt es SVG!)

+ große Klickfläche

– Ein teaser-Text würde das klare Raster sprengen, ist aber oft nützlich/nötig

– es muss für jeden Link eine Grafik erstellt werden, bzw. mit vielen spans gearbeitet werden (Mediawiki kann ein Bild oder ein p verlinken, aber nicht beides gleichzeitig!)

Umweg: div erhält data-url-Attribut und Link wird mit JS erzeugt → davon sollten wir die Finger lassen.

Tiles

Einstieg in HTML </>
der Kurs für die ersten Schritte in HTML und CSS.

Schritt für Schritt zur eigenen Webseite

Trennung von Inhalt, Präsentation und Verhalten

… erklärt, welche Rollen die Techniken HTML, CSS und JavaScript spielen.

Bilder im Internet

• Formate und Größen
• Einbindung
• responsive Bilder
• Bilder präsentieren
• Bilderkarussell (mit CSS-animation)

Farbe und Farbkonzept

• Farben und Kontraste
• Licht und Schatten

+ Innerhalb einer `tile` sind mehrere Links möglich

+ Wir können die Icons aus der FAQ und den "Miniportalseiten" (Da muss ein genauer Begriff her!!!) wiederverwenden

+ So viel Text wie nötig - so wenig wie möglich.

ToDo 12.12.

1. Vorabstimmung Welche Struktur schlagen wir vor?
2. Gestaltung

   Wie gestaltet man die? Christian will nen Rand und Hintergrund

3. Verwendung
   • auf Übersichtsseiten (klar!)
   • diese Tiles sollten auch am Ende eines Tutorials unter == Siehe auch == weitere Tutorials empfehlen
   • neue Tutorials hervorheben?

     Cards auf Portalseiten

     Bsp: CSS-Nesting

     Wie könnte man so etwas außerhalb der Startseite auf den entsprechenden Portalseiten hervorheben?

   • Verlinkung Blog

     Wir haben einige gute Blog-Beiträge, die auf Portalseiten nicht auftauchen:

     z.B.

     • Leaflet
     • Houdini

Beachten Sie: Wichtig: Solche "tiles" werden bei einer Überarbeitung des Artikels ggfalls angelegt - wir gehen nicht durch das Wiki und ändern alles sofort!

Tutorials nach Zielgruppen ausrichten

Vorlage:Text-Info und Zielgruppe in Einleitung nennen, klingt logisch, aber wie genau sollten wir dies tun?

Wer entwickelt ein Vorbild, was man in der Hilfe entsprechend verlinken könnte?

Diskussion im Forum

• Trennung in Schwierigkeitsgrade
• eigene Seite für ES6?

BTW: Fortsetzungsvorlage oben - noch sinnvoll? imho nein

Wie sollten Wie fange ich an? und FAQ - Häufige Fragen und Links zu den Antworten verlinkt werden?
--07:17, 01. Nov. 2023 (CET)

Begriffe und Begrifflichkeiten

Stil-Element oder phrasing content?

Leider gibt es kein [Spezial:Text_ersetzen], mit dem man das in einem Aufwasch erledigen könnte.

Ist entschieden - wir verwenden den englischen Begriff, das sollte aber irgendwo festgelegt werden.

Makeover/Aussehen

Der Hilfebereich zeigt einiges, was von mir sortiert und immer wieder besprochen wurde. Auch wenn ich Camping-Riders Sicht, dass das alles ungültig sei und nur durch eine Abstimmung in der MV legitimiert werden könne, ablehne, würde ich hier den Entwicklungsstand präsentieren und zur Diskussion stellen:

Gestaltungsrichtlinien

Hörnchen schlug vor, hier einen festen Leitfaden zu erstellen:

• Hilfe:Farbtabelle (bereits vorhanden)
• Logos und Bildwortmarke
• Typografie

Makeover

Leider stecken geblieben, aber hier schon sichtbar:

• Makover(Test-Wiki)

---

Wie soll es weiter gehen?