Rolf B: Cheat Sheet für HTML?

Beitrag lesen

Hallo Janosch (und Felix)

SELFHTML hat eine andere Zielgruppe.

Nach meinem Verständnis enthält unsere Zielgruppe auch Menschen, die bisher von HTML nichts bis wenig wussten und in das Thema einsteigen möchten. Oder die HTML 3 gelernt haben und Orientierung zum Look-and-Feel einer HTML 5-Seite brauchen (sprich: <!doctype html>, und kein <center> oder <font>).

au contraire…

Derya und Brian hatte ich hauptsächlich wegen des Alters ausgewählt. Welche Persona den Neueinsteiger darstellt, hm, vielleicht noch die Heidi. Die übrigen haben den Einstieg schon hinter sich oder interessieren sich nicht für HTML.

Derya möchte eine App erstellen - weshalb ist sie in unserer Persona-Liste? Doch nicht, weil wir App-Programmierung mit Objective C oder Java erklären, sondern weil man PWAs erstellen kann. Dafür braucht sie HTML.

Brian sucht HTML Elemente um Forenbeiträge zu formatieren. Es gibt 1-2 Foren auf dieser Welt, wo das geht. Die anderen verwenden BBCode oder Markdown. Ich gebe zu, dass ich bei der Auswahl der Personae nicht gut aufgepasst habe. Brian gehört von der Liste gestrichen, weil er etwas möchte, was es de facto nicht gibt. Gut, das wollen einige Forenteilnehmer auch... 😉

Nach meiner Vorstellung sollte ein Cheat Sheet eine einfache HTML Seite mit wenig Text, aber viel Markup darstellen, auf der die wichtigsten HTML Elemente enthalten sind. Es stellt damit gleichzeitig das Grundgerüst dar. Es sollte zweispaltig sein: links das HTML, rechts die Erklärung dazu, unter Verwendung der korrekten Terminologie, mit der sich der Nutzer im Zweifelsfall im Wiki orientieren kann.

Von einem solchen Blatt würde ich mir versprechen, dass ein Einsteiger einen schnellen Überblick darüber bekommt, wie eine HTML Seite sinnvoll strukturiert ist, um nicht in kompletter Unkenntnis zu beginnen. Idealerweise wäre das Cheat Sheet die eingedampfte Version unseres Schreinerei-Tutorials. Formularelemente können in begrenzter Menge hinzu, dort kann man den konsequenten Einsatz von <label> sowie von <button> statt <input> betonen. Ob man auf Medienelemente außer <img> eingehen sollte? Weiß nicht, da steckt wieder viel Backgroundwissen drin.

Themen wie <dialog>, Popover oder Dropdown-Menüs sind für ein solches Sheet zu komplex. Natürlich ist das immer die erste Frage der Anfänger, die wollen die schicken Sachen als erstes machen… Aber vielleicht kann das CheatSheet ein gridbasierendes Holygrail-Layout verwenden?

Damit sind wir gleich beim Hauptproblem dieses Cheat Sheets: Die größte Hürde bei der Webentwicklung ist nicht das HTML. Das ist relativ übersichtlich. Viel schwieriger ist es, den Überblick über die bald 400 CSS Eigenschaften und die zugehörigen Konzepte zu behalten, und dafür ist ein Cheatsheet schon sehr viel schwieriger. Dazu bräuchte es mehrere: eins für Flexbox, eins für Grid, eins für Ränder und Abstände, eins für Textformatierung, etc.

Selbst für die HTML Seite des Cheat Sheets braucht man CSS. Die Rückseite des Cheat Sheets sollte daher das nötigste CSS für diese Seite enthalten und erklären.

SSLuL, die in 10 Unterrichtsstunden HTML machen sollen, könnten das als nützlich empfinden. Vor allem könnten sie bei einer Themenvertiefung drauf zurückgreifen. Und wir könnten einen QR Code draufmachen, der auf eine passende Portalseite im Wiki zeigt.

Rolf

--
sumpsi - posui - obstruxi