Einstieg in HTML-Tutorial überarbeiten?

[Matthias Scharwies]

Servus!

Ich hab grad noch mal unser Einstiegs-Tutorial durchgeschaut:

• 9 Kapitel wirken sehr viel, auch wenn sie kurz sind.
• Die fertige(n) Seite(n) sehen nach nichts aus.

Meine Vorschläge:

• Kapitel 3 + 4 zusammenfassen
  • Organisatorisches gehört imho als Unterkapitel zu == eine zweite Seite ==
• Kapitel 6: Bilder
  • neue Bilder, evtl SVG oder aus Wikimedia
  • Warnhinweis wegen Bilderklau
• Kapitel 7+8 Seiten hübscher machen zusammenfassen
  • font-size:1,5em ist gut, zuerst würde ich aber noch color und background-color drannehmen, damit man „was sieht“
  • zuerst evtl. doch „nur“ im style-Element, erst am Schluss als eigene Datei. Dies hätte den Vorteil, dass man zuerst im Frickl herumprobieren kann.
• im letzten Kapitel wird ein div mit id eingeführt, was könnte man dort noch verwenden?

Über eine Diskussion wäre ich dankbar!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

ich bin kein Lehrer und habe daher nicht unbedingt die beste Erfahrung darin, Themen didaktisch aufzubereiten.

• Ich hatte die Vorüberlegungen beinahe übersehen. Ich weiß, dass eine Agenda nach vorn gehört, aber ggf. müsste man einen Hinweis haben, dass nach der Agenda noch was kommt. Sonst klickt man gleich auf den ersten Punkt und die Vorüberlegungen sind vorüber.

• Du hattest doch irgendeinen Onlinedienst der Lesedauern bestimmt. Ich kann mir vorstellen, dass solche Zeitangaben sowohl auf den einzelnen Seiten wie auch in der Agenda nützlich sind, damit die Interessentin weiß, was ihr bevorsteht. Neun Abschnitte sind erträglicher, wenn da 15 Minuten pro Abschnitt hintersteht (und die sind es sicher, man soll ja auch ausprobieren).

• Achso, ausprobieren. Darauf müsste man die Interessenten einschwören. Trocken lernt sich das nicht. Und man sollte auch gleich zu Beginn sagen, dass das Bauen von Webseiten auf einem Smartphone ein frustrierendes Erlebnis ist. Es gibt für Webentwickler nur eins, was besser ist als ein großer Bildschirm: ein zweiter großer Bildschirm.

• Wie ist die Abgrenzung zwischen diesem und jenem? Ich weiß das, aber ein Anfänger ist ggf. verwirrt. Und die Frage wäre auch, ob man die beiden Teile nicht verheiraten sollte. Zumindest sehe ich gerade im Abschnitt "Grundgerüst", dass da etwas über Editoren steht, aber dann in den HTML 5 Bereich verlinkt wird, um eine Erklärung in allen Einzelheiten zu bekommen. Und danach folgen eigene Erklärungen in allen Einzelheiten. Man merkt der Sache an, dass hier Dinge parallel entstanden und nicht konsolidiert sind.

Rolf

[Matthias Scharwies]

Servus!

• Ich hatte die Vorüberlegungen beinahe übersehen. Ich weiß, dass eine Agenda nach vorn gehört, aber ggf. müsste man einen Hinweis haben, dass nach der Agenda noch was kommt. Sonst klickt man gleich auf den ersten Punkt und die Vorüberlegungen sind vorüber.

Guter Einwand! Ich hatte sie „rausgeklammert“, da imho das "Wollen Sie wirklich weitermachen?" zu negativ klang. Einen Hinweis muss es aber geben!

• Du hattest doch irgendeinen Onlinedienst der Lesedauern bestimmt. Ich kann mir vorstellen, dass solche Zeitangaben sowohl auf den einzelnen Seiten wie auch in der Agenda nützlich sind, damit die Interessentin weiß, was ihr bevorsteht. Neun Abschnitte sind erträglicher, wenn da 15 Minuten pro Abschnitt hintersteht (und die sind es sicher, man soll ja auch ausprobieren).

Ja, das werde ich einfügen!

• Achso, ausprobieren. Darauf müsste man die Interessenten einschwören. Trocken lernt sich das nicht.

Ja, da hatte ich schon Email-Kontakt mit Leuten, die das "ausprobieren" bei den Live-Beispielen überlesen hatten! 😀

Und man sollte auch gleich zu Beginn sagen, dass das Bauen von Webseiten auf einem Smartphone ein frustrierendes Erlebnis ist. Es gibt für Webentwickler nur eins, was besser ist als ein großer Bildschirm: ein zweiter großer Bildschirm.

Ja, danke!

• Wie ist die Abgrenzung zwischen diesem und jenem? Ich weiß das, aber ein Anfänger ist ggf. verwirrt. Und die Frage wäre auch, ob man die beiden Teile nicht verheiraten sollte. Zumindest sehe ich gerade im Abschnitt "Grundgerüst", dass da etwas über Editoren steht, aber dann in den HTML 5 Bereich verlinkt wird, um eine Erklärung in allen Einzelheiten zu bekommen. Und danach folgen eigene Erklärungen in allen Einzelheiten. Man merkt der Sache an, dass hier Dinge parallel entstanden und nicht konsolidiert sind.

Full Ack! Da muss halt dauernd gearbeitet werden. DAs HTML5-Tutorial hatten wir erst nachträglich eingerichtet, weil sich Leute anno 2017/18 beschwert hatten, dass es nirgends eine Auflistung neuer Elemente gäbe.

Danke für Dein Feedback!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

ich habe Kapitel 1 einmal überarbeitet und hoffe, dass es in deinem Sinne ist. Tim Ehling meint, es wären 17 Minuten Lesezeit, ich hab's mal auf 15 abgerundet weil auch einiges so erzählt wird.

Wenn's Dir nicht passt, mach einfach einen Revert :)

Eigentlich sollte im Kapitel 1 jetzt alles stehen, was auch im HTML5/Grundgerüst steht.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

ich habe Kapitel 1 einmal überarbeitet und hoffe, dass es in deinem Sinne ist. Tim Ehling meint, es wären 17 Minuten Lesezeit, ich hab's mal auf 15 abgerundet weil auch einiges so erzählt wird.

Wenn's Dir nicht passt, mach einfach einen Revert :)

Eigentlich sollte im Kapitel 1 jetzt alles stehen, was auch im HTML5/Grundgerüst steht.

Vielen Dank! Was meinst du - sollte Abschnitt 3 "Spitze Klammern piken" da überhaupt noch drin stehen? Wir predigen bei umlauten ja immer kein üzu verwenden und eine einzelne > < schadet ja auch nicht.

Für Kapitel 2 habe ich schon eine Idee!

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Scharwies,

Vielen Dank! Was meinst du - sollte Abschnitt 3 "Spitze Klammern piken" da überhaupt noch drin stehen?

Unbedingt.

Wir predigen bei umlauten ja immer kein üzu verwenden und eine einzelne > < schadet ja auch nicht.

Das sind zwei verschiedene Dinge: Das eine sind Sonderzeichen, das andere nicht. Ein Sonderzeichen ist ein Zeichen, das im Kontext der (Programmier- oder Auszeichnungs-)sprache eine besondere Bedeutung hat.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

ja, Eingabe der HTML Steuerzeichen <&> gehört definitiv rein. Vielleicht hat es Zeit bis Kapitel 2, weil im <head> der Bedarf dafür nicht so besteht.

Warum steht im Wiki eigentlich immer <code><nowiki><sometag></nowiki></code>? code impliziert allem Anschein nach nowiki; ich nehme das nowiki-Element weg, wo immer ich es innerhalb von <code>...</code> finde. Gibt es Gründe, das nicht zu tun?

Rolf

[Matthias Apsel]

Hallo Rolf B,

Warum steht im Wiki eigentlich immer <code><nowiki><sometag></nowiki></code>?
code impliziert allem Anschein nach nowiki;

Nein.

ich nehme das nowiki-Element weg, wo immer ich es innerhalb von <code>...</code> finde.

Solange du prüfst, ob es noch wie gewünscht aussieht … 😉🤔

Gibt es Gründe, das nicht zu tun?

Vergleiche

<code><nowiki>https://example.com</nowiki></code> und

<code>https://example.com</code>

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

somelink ≠ sometag...

Rolf

[Matthias Apsel]

Hallo Rolf B,

somelink ≠ sometag...

<code><a href="https://example.com">Link</a></code> shows the same problem.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

<code>https://example.com</code>
<code><a href="https://example.com">Link</a></code>

willst Du mich linken? 😉

Rolf

[Matthias Scharwies]

Servus!

Für Kapitel 2 habe ich schon eine Idee!

Ich wollte in Kapitel 2 anstelle der lorem Ipsum-Absätze nicht ausgezeichneten Text verwenden, den man dann im Frickl formatieren könnte.

@Felix Riesterer Leider rendert das Frickl Text ohne HTML-Elemente nicht als plain text, sondern verschluckt es.

Ich habe als Notbehelf mal ein p-Starttag eingefügt. Sollte man das so lassen oder das Frickl, wenn Zeit wäre, anpassen?

Herzliche Grüße

Matthias Scharwies

[MudGuard]

Hi,

@Felix Riesterer Leider rendert das Frickl Text ohne HTML-Elemente nicht als plain text, sondern verschluckt es.

Ich habe als Notbehelf mal ein p-Starttag eingefügt. Sollte man das so lassen oder das Frickl, wenn Zeit wäre, anpassen?

Ein p erlaubt nur inline innendrin. Ein div würde auch block-Inhalte innendrin erlauben - das p wäre also vor einem eingefügten <div> zu Ende, der Text nach dem </div> könnte dann wieder verschluckt werden.

Wobei ich den Text rechts auch sehe, wenn ich das <p> weglösche und das Ergebnis aktualisiere …

cu,
Andreas a/k/a MudGuard

[Matthias Scharwies]

Servus!

Hi,

@Felix Riesterer Leider rendert das Frickl Text ohne HTML-Elemente nicht als plain text, sondern verschluckt es.

Ich habe als Notbehelf mal ein p-Starttag eingefügt. Sollte man das so lassen oder das Frickl, wenn Zeit wäre, anpassen?

Ein p erlaubt nur inline innendrin. Ein div würde auch block-Inhalte innendrin erlauben - das p wäre also vor einem eingefügten <div> zu Ende, der Text nach dem </div> könnte dann wieder verschluckt werden.

div kennen die Anfänger noch nicht. 😀

Wobei ich den Text rechts auch sehe, wenn ich das <p> weglösche und das Ergebnis aktualisiere …

Das Frickl-Script zieht den Inhalt des p (oder div)-Elements in den neuen body. Dann kann man damit machen, was man will. Ohne ein einleitendes HTML-Element wird nichts aus dem bestehenden Beispiel in das Frickl gezogen.

Herzliche Grüße

Matthias Scharwies

[JürgenB]

Hallo Matthias,

• Ich würde für die „Vorüberlegungen“ eine eigene Seite nehmen, z.B. Kapitel 0.
• In den Vorüberlegungen oder (und) im ersten Kapitel würde ich auf die Vorschau und das Ausprobieren eingehen.
• Kapitel 3 und 4 können zusammengefasst werden.
• Bilder ersetzen ist OK, wenn man ohne Aufwand schönere Bilder findet.
• Kapitel 7 und 8 zusammenfassen ist ok. Das wird zwar ein großes Kapitel, aber es gehört ja zusammen.
• CSS im Style-Element behandeln finde ich gut. Am Ende kann man darauf hinweisen, dass das Meiste in jeder Datei vorkommt und eine zentrale CSS-Datei einfacher zu handhaben ist. Hier dann aber auch auf die Unterschiede bei relativen Pfaden im CSS und im HTML eingehen.

Gruß
Jürgen

[Linuchs]

Hallo Matthias,

ich bewundere das Engagement, so eine Fibel für die erste Webmaster-Klasse zusammenzustellen.

habe mir als Beispiel das Kapitel 6 angeschaut.

Wie auf vielen selfHTML-Seiten wortreiche Beschreibung, beinahe schon geeignet zum Vorlesen über Herrn Meyer und die fehlenden Bilder seiner Belegschaft.

Wenn ich per Google nach der Syntax von HTML, CSS, Javascript suche, ist selfHTML selten erste Wahl, weil oft das gesuchte Know-How im Text versteckt wird.

Warum nicht mit dem „Kern“ anfangen, wenn es um Bilder geht:

<img src="../img/bett.jpg" alt="Bett">

danach tabellarisch-übersichtlich, welche Angaben dem img-tag zugeordnet werden können.

Und erst dann Beispiele für Anfänger, wie man Bilder in eine Webseite einbinden kann.

Linuchs

[Matthias Apsel]

Hallo Linuchs,

vielen Dank für die netten Worte.

Warum nicht mit dem „Kern“ anfangen, wenn es um Bilder geht:

<img src="../img/bett.jpg" alt="Bett">

danach tabellarisch-übersichtlich, welche Angaben dem img-tag zugeordnet werden können.

Mach doch mal einen konkreten Vorschlag.

Bis demnächst
Matthias

[Linuchs]

Mach doch mal einen konkreten Vorschlag.

Gerne.

<img src="../img/bett.jpg" alt="Bett">

Kürzel	bedeutet
img	(engl. image = „Bild“), eine rechteckige Fläche
src	(engl. source = „Quelle“), URL der Bilddatei, die der Browser laden und anzeigen soll
alt	(engl. alternative = „Alternativtext“) wird angezeigt, falls die Datei nicht verfügbar ist. Wird von Screenreadern vorgelesen

Basis-Eigenschaften:

img wird im Fließtext wie ein Zeichen behandelt, kann also mitten im Text stehen und belegt die Breite und Höhe in Pixel, die in der Bilddatei vorgesehen ist.

Tipp:

Ein unbearbeitetes Bild von der Kamera kann größer sein als die Sichtfläche (Viewport) des Browsers und benötigt eine (unnötig) lange Ladezeit. Mit einem Grafik-Programm (z.B. kostenloses GIMP) kann das Bild und damit die Dateigröße vor dem Hochladen auf das gewünschte Maß verkleinert werden.

freiwillige CSS-Eigenschaften:

`<img src="../img/bett.jpg" alt="Bett" style="height:8em;opacity:.8;width:10em;">``

Kürzel	bedeutet
height	anzuzeigende Höhe des Bildes in cm, em, mm, px, ... (siehe Link Längenangaben). Wenn width fehlt, wird es proportional zu height errechnet
opacity	Deckkraft 0 .. 1
width	anzuzeigende Breite des Bildes in cm, em, mm, px, ... (siehe Link Längenangaben). Wenn height fehlt, wird es proportional zu width errechnet

Einbindung in HTML:

<!DOCTYPE html>
<html lang="de">
<head>
...
</head>
<body>
  <h1>Wir tischlern nicht nur, wir stühlen und betteln auch</h1>
  <p>Unser Renner:</p>
  <p><img src="../img/bett.jpg" alt="Bett"><br>
  Hundebett statt -körbchen</p>
</body>
</html>

Linuchs

[Matthias Scharwies]

Servus!

Hallo Matthias,

ich bewundere das Engagement, so eine Fibel für die erste Webmaster-Klasse zusammenzustellen.

Das ist das Verdienst von Stefan Münz. Er hat vor 25 Jahren ein neues Medium mit seiner Dokumentation vielen Leuten nahegebracht. Dies ging damals nur mit Prosa und weiter-Links am Ende der Seiten:

1. Was ist das Internet?
2. HTML/Regeln
3. HTML/Kopfdaten

und dann kamen die ersten Beispiele mit Elementen zur Textstrukturierung.

Mittlerweile ist die Kenntnis viel größer und jeder Anfänger glaubt, die ersten Kapitel überspringen zu können. Deshalb hatte Astrid Semm ( @stonie ) den Versuch unternommen, hier in lockerem Ton eine Einführung zu schreiben. @Rolf B Um dieses Tutorial haben sich die anderen Tutorials und Kurse herum entwickelt - oft aus SELFHTML-Aktuell-Artikeln heraus.

Jetzt ist es eben Zeit dieses erste Tutorial (mal wieder) auf den Prüfstand zu stellen.

habe mir als Beispiel das Kapitel 6 angeschaut.

Wie auf vielen selfHTML-Seiten wortreiche Beschreibung, beinahe schon geeignet zum Vorlesen über Herrn Meyer und die fehlenden Bilder seiner Belegschaft.

Wenn ich per Google nach der Syntax von HTML, CSS, Javascript suche, ist selfHTML selten erste Wahl, weil oft das gesuchte Know-How im Text versteckt wird.

Warum nicht mit dem „Kern“ anfangen, wenn es um Bilder geht:

<img src="../img/bett.jpg" alt="Bett">

danach tabellarisch-übersichtlich, welche Angaben dem img-tag zugeordnet werden können.

Das ist eine Referenz für Leute, die wissen wonach sie suchen. Das haben wir auch: Referenz:HTML/img

Für einen Anfänger ist das Gift.

Und erst dann Beispiele für Anfänger, wie man Bilder in eine Webseite einbinden kann.

Die Tutorials versuchen eine Quadratur des Kreises

• Kontextualisierung: eine Geschichte erzählen, die Spannung aufbaut und zum Weiterlesen animiert.
• didaktische Reduktion: etwas so zu vereinfachen, dass es gut zu verstehen ist, ohne dass es falsch wird.
• klare, einfache Sprache, ohne auf wichtige Fachbegriffe zu verzichten.
• einfache Beispiele, die eine Sache erklären, sich dann aber erweitern lassen
• ein End-Produkt, das so gut aussieht, dass man sieht, dass HTML, CSS und alles andere aus einem Guss ist.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

danach tabellarisch-übersichtlich, welche Angaben dem img-tag zugeordnet werden können.

Das ist eine Referenz für Leute, die wissen wonach sie suchen. Das haben wir auch: Referenz:HTML/img

Das haben andere auch – nur besser. Zum Vergleich: MDN

Könnten im Wiki auch mal sämtliche Hinweise auf HTML 4 (und davor) und auf XHTML getilgt werden? Deren praktische Relevanz fürs Zielpublikum: null.

😷 LLAP

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Könnten im Wiki auch mal sämtliche Hinweise auf HTML 4 (und davor) und auf XHTML getilgt werden? Deren praktische Relevanz fürs Zielpublikum: null.

Du hast dir grad nen <i> gekauft!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Gunnar,

Deren praktische Relevanz fürs Zielpublikum: null.

Das sehe ich anders. Man findet im Netz genügend Beispiele, die HTML 4 oder XHTML verwenden, und bei denen man ggf. gar nicht mehr weiß, was das eigentlich sollte.

Nur den aktuellen Stand zu dokumentieren, ohne Hinweise auf "so war das mal, aber das macht man heute so und so", ist nicht die beste Idee. Ja ich weiß, das bläht die Doku auf. Aber ich habe die letzten 4 Wochen damit verbracht, Dokumentation zu ASP.NET 4 und ein paar Komponenten wie ScriptManager zu suchen. Kaum noch was zu finden, weil MS die ganze ASP.NET 4 Doku bis auf ein paar blabla Seiten depubliziert hat. Was nicht ASP.NET Core 3 ist, existiert für MS nicht mehr. Und ich steh da und muss mich in Legacy-Code einarbeiten. Und mein ASP.NET 4 Buch steht im Büro, weit weg...

Rolf

[Gunnar Bittersmann]

@@Rolf B

Hallo Gunnar,

Deren praktische Relevanz fürs Zielpublikum: null.

Das sehe ich anders. Man findet im Netz genügend Beispiele, die HTML 4 oder XHTML verwenden

Ich kenne kein einziges Beispiel, das XHTML verwendet.^[1]

HTML 4 ist eine Teilmenge von HTML (f/k/a HTML5) – bis auf das bisschen Zeugs, was rausgefallen ist, aber weiterhin von Browsern interpretiert wird.

Man verwendet kein HTML 4, man verwendet HTML.

Nur den aktuellen Stand zu dokumentieren, ohne Hinweise auf "so war das mal, aber das macht man heute so und so", ist nicht die beste Idee.

Doch. Für den Zweck, den SELFHTML verfolgt, genau das.

Es kann ja durchaus eine Seite geben, wo auf die Unterschiede zwischen XHTML und HTML – und polyglottem HTML! – eingegangen wird. Da kann man dann auch unterbringen, dass es Vorteile hat, optionale Tags nicht wegzulassen und Attributwerte immer in Anführungszeichen zu setzen.

Aber bitte nicht bei img, input, br, hr, … jedesmal der Hinweis: in XHTML muss da ein Schrägstrich hin. Unnützer Ballast fürs Zielpublikum; lenkt bloß vom Wesentlichen ab.

😷 LLAP

---

1. abgesehen vielleicht von vereinzelten Testseiten (nicht -sites), von denen ich auch eine oder zwei habe ↩︎

[Linuchs]

Moin Matthias S.

ich bewundere das Engagement, so eine Fibel für die erste Webmaster-Klasse zusammenzustellen.

Das ist das Verdienst von Stefan Münz.

Ich weiß. Er schrieb damals sinngemäß, dass er neue Werkzeuge (HTML) dadurch lernt, dass er sie mit Hilfe dieser Werkeuge beschreibt.

Das war mir sofort sympathisch, so mache ich es auch.

jeder Anfänger glaubt, die ersten Kapitel überspringen zu können

Kann ich sehr gut nachvollziehen. Anfänger möchten mit „Hello World“ ein Erfolgserlebnis, aber keinen Vortrag über die Grundlagen und Anfänge des Internet durchlesen.

Auch hier im Forum gibt es Schlaukluge, die bei den einfachsten Fragen erstmal die Fettnäpfchen aufzählen, in die man treten kann. Schau mal in die Statistik, wer sich registriert hat, aber nur einen einzigen Beitrag eingegeben hat.

Ich habe für meine Kunden-Projekte Dokumentationen erstellt und weiß, dass die Kommunikation zwischen IT-Profis und Anwendern problematisch und voller Mißverständnisse ist. Eigentlich sollte die Doku nicht vom Programmierer, sondern von einem Tester/Texter erstellt werden. In den 1980er Jahren war das meine Funktion in einem Softwarehaus. Kostet aber extra.

Mir gefällt der Aufbau bei Wikipedia. Im ersten Absatz wird versucht, den Begriff zu erklären und danach kommen Kapitel zu den diversen Sichtweisen geografisch, historisch, ...

eine Geschichte erzählen, die Spannung aufbaut und zum Weiterlesen animiert.

Bei einer „technischen“ Dokumentation erwarte ich das nicht. Vor einiger Zeit suchte ich nach Rasenmähern und Rasentrimmern. Was las ich auf den Webseiten der Händler? Wie toll man damit Rasen mähen kann. Wer hätte das gedacht, dass man mit Rasenmähern Rasen mähen kann?

Ich weiß aus Erfahrung, dass die

Quadratur des Kreises

keinem so recht gelingen kann. Umso schlimmer, wenn keine Rückmeldungen kommen.

Linuchs

[Der Martin]

Hallo,

jeder Anfänger glaubt, die ersten Kapitel überspringen zu können

Kann ich sehr gut nachvollziehen. Anfänger möchten mit „Hello World“ ein Erfolgserlebnis, aber keinen Vortrag über die Grundlagen und Anfänge des Internet durchlesen.

das mag für eine Mehrheit zutreffen; ich bin eher jemand, der beim Einstieg in ein neues Thema wirklich mit den Basics anfangen und diese verstehen möchte. Bis zu einem Live-Beispiel und dem Selbst-Probieren ist es bei mir ein langer Anlauf.

Auch hier im Forum gibt es Schlaukluge, die bei den einfachsten Fragen erstmal die Fettnäpfchen aufzählen, in die man treten kann.

Ja, und das ist nicht besonders nützlich. Aber viel schlimmer finde ich noch, dem Laien eine fertige, aber möglicherweise nicht ausgereifte Lösung anzubieten. Die setzt der Laie dann nämlich ein, ohne weiter darüber nachzudenken.

Ich habe für meine Kunden-Projekte Dokumentationen erstellt und weiß, dass die Kommunikation zwischen IT-Profis und Anwendern problematisch und voller Mißverständnisse ist.

Eigentlich sollte die Doku nicht vom Programmierer, sondern von einem Tester/Texter erstellt werden.

Ja. Oder noch besser, von beiden gemeinsam.

Vor einiger Zeit suchte ich nach Rasenmähern und Rasentrimmern. Was las ich auf den Webseiten der Händler? Wie toll man damit Rasen mähen kann. Wer hätte das gedacht, dass man mit Rasenmähern Rasen mähen kann?

Das mag so manchen überraschen. 😉

Live long and pros healthy,
 Martin

[Linuchs]

Bis zu einem Live-Beispiel und dem Selbst-Probieren ist es bei mir ein langer Anlauf.

Dann bist du der Typ „Theoretiker“, der beim Kaffeekochen zunächst nicht an den leckeren Kaffee denkt, sondern verstehen möchte, warum das Wasser siedet und wieviel Energie das kostet.

Ich poste beim Physikerboard. Zu 95% Theoretiker, die nach passenden Formeln zum Problem suchen. Aber so manches Mal kein Gefühl haben, ob das Ergebnis tausendfach zu hoch oder um ein tausendstel zu klein ist.

Ich bezeichne mich erstmal als „Praktiker“, stelle mir die beschriebene Situation vor. Kann dann logischerweise zu Themen wie „Quantenphysik“ und „Urknall“ nichts schreiben, aber überprüfe immer meine Schätzungen zu Größenordnungen und lerne, besser zu schätzen.

Und irgenwie betrifft das auch IT-Probleme. Gerne schätze ich, welcher Aufwand bis zur Lösung erforderlich ist. Falls zu hoch, suche ich alternative Ansätze oder verabschiede mich von der Idee. Lebenswichtig für einen Freiberufler, der ein Angebot machen soll.

viel schlimmer finde ich noch, dem Laien eine fertige, aber möglicherweise nicht ausgereifte Lösung anzubieten

Da bin ich ganz anders. Menschen und viele Tiere brauchen Vorbilder, um zu lernen. Eine Lösung, die funktioniert, kann ich untersuchen, nachahmen, hinfallen und wieder aufstehen.

Ich denke, der Eine (du) lernt nach dem Top-Down-Verfahren (erstmal das Allgemeine), der andere (ich) nach dem Down-Top-Verfahren (das gelungene Detail erweckt Interesse an Zusammenhängen).

Linuchs

[Der Martin]

Hallo,

Bis zu einem Live-Beispiel und dem Selbst-Probieren ist es bei mir ein langer Anlauf.

Dann bist du der Typ „Theoretiker“, der beim Kaffeekochen zunächst nicht an den leckeren Kaffee denkt, sondern verstehen möchte, warum das Wasser siedet und wieviel Energie das kostet.

und daran, was eigentlich im Kaffee drin ist und so. Ja, im Prinzip schon.

Ich poste beim Physikerboard. Zu 95% Theoretiker, die nach passenden Formeln zum Problem suchen. Aber so manches Mal kein Gefühl haben, ob das Ergebnis tausendfach zu hoch oder um ein tausendstel zu klein ist.

Das ist nicht gut.

Ich bezeichne mich erstmal als „Praktiker“, stelle mir die beschriebene Situation vor. Kann dann logischerweise zu Themen wie „Quantenphysik“ und „Urknall“ nichts schreiben, aber überprüfe immer meine Schätzungen zu Größenordnungen und lerne, besser zu schätzen.

Ich sehe mich irgendwo im Transit dazwischen. Wenn ich in ein Thema neu einsteige, bin ich der Theoretiker, den du beschreibst; mit zunehmendem Wissen steigt dann auch die Motivation zum Ausprobieren; mit zunehmender Erfahrung werde ich dann mehr und mehr zum Praktiker, der dann auch ein "Gefühl" für die richtigen Größenordnungen und mögliche Fehlerquellen hat.

Und irgenwie betrifft das auch IT-Probleme. Gerne schätze ich, welcher Aufwand bis zur Lösung erforderlich ist. Falls zu hoch, suche ich alternative Ansätze oder verabschiede mich von der Idee. Lebenswichtig für einen Freiberufler, der ein Angebot machen soll.

Absolut. Aber auch wichtig für einen Angestellten, der vom Chef gefragt wird: "Schaffen Sie das bis Ende der Woche?"

viel schlimmer finde ich noch, dem Laien eine fertige, aber möglicherweise nicht ausgereifte Lösung anzubieten

Da bin ich ganz anders. Menschen und viele Tiere brauchen Vorbilder, um zu lernen. Eine Lösung, die funktioniert, kann ich untersuchen, nachahmen, hinfallen und wieder aufstehen.

Richtig. Aber wie groß ist die Motivation zum Untersuchen, wenn man etwas bekommt, das augenscheinlich funktioniert? Bei den meisten wahrscheinlich sehr gering.

Ich denke, der Eine (du) lernt nach dem Top-Down-Verfahren (erstmal das Allgemeine), der andere (ich) nach dem Down-Top-Verfahren (das gelungene Detail erweckt Interesse an Zusammenhängen).

So wie du uns beschrieben hast, ist es genau umgekehrt: Ich fange gern bei den Grundlagen und Einzelheiten an und arbeite mich dann langsam zum Gesamtkunstwerk durch. Das nennt man übrigens Bottom-Up, also von unten nach oben. Was du machst, ist Top-Down: Oben beim Gesamtkonzept anfangen, und von da aus langsam nach unten in die Details gehen.

Live long and pros healthy,
 Martin

[Matthias Apsel]

Hallo Linuchs,

Schau mal in die Statistik, wer sich registriert hat, aber nur einen einzigen Beitrag eingegeben hat.

Meinem Gefühl nach werden die meisten dieser Beiträge Fragen sein und keine Antworten.

Bis demnächst
Matthias

[Matthias Scharwies]

Servus!

• Kapitel 7+8 Seiten hübscher machen zusammenfassen
  • font-size:1,5em ist gut, zuerst würde ich aber noch color und background-color drannehmen, damit man „was sieht“

Ich habe das jetzt so umgesetzt: Kapitel 6: Gestaltung mit CSS

In der Erklärung wird erst nur dies vorgegeben:

h2 {
	font-size: 2.5em;
	color: red;
	background-color: beige;
} 

Im Frickl wird dann noch mehr angeboten:

h2 {
	font-size: 2.5em;
	color: red;
	background-color: beige;
	border: thin solid;
	text-align: center;
} 

In den nächsten Tagen entwerfe ich für Beispiel:Schreinerei-Meier-formate.css mal ein Layout, das man dann aber im Frickl nicht verändern kann. Zum Herunterladen und lokal rumprobieren geht es aber.

Im Kapitel 7 würde CSS dann weitergehen:

• Breiten und Abstände, wobei ich eigentlich auf media queries verzichten, aber auch kein float verwenden möchte.

• Klassen und ids, um einzelne Elemente zu selektieren

Evtl. benötigt man außer dem div dann noch andere HTML-Elemente; evtl. figure oder aside - mal schauen.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Ich habe das jetzt so umgesetzt: Kapitel 6: Gestaltung mit CSS

Im Abschnitt: Kapitel6#Schriftgröße_von_Listen_und_Preistabelle gibt es folgendes CSS:

li { font-size: 1.7em; }
tr { font-size: 1.7em; }

Ich würde hier den Begriff Selektor-Listen einführen, glaube aber, dass table und ul bessere Selektoren sind, auch wenn li natürlich eventuelle ol-Listen berücksichtigt. Was meint ihr?

ul, 
table { 
 font-size: 1.7em; 
}

Die auf ./Beispiel:formate.css eingebundene(n) Datei(en) kann man im Frickl eh nicht ändern. Was haltet ihr davon, hier im Tutorial mit style-Elementen zu arbeiten

… und paralell ein Beispiel-Design mit background-image, max-width etc anzubieten, das nicht vollständig im Tutorial erklärt wird? Oder sollte man es ganz kurz erklären? Oder so lassen, wie's ist, auch wenn (mir) das zuwenig CSS-Regelsätze sind?

https://wiki.selfhtml.org/wiki/Beispiel:Schreinerei_Meier_formate2.css

https://wiki.selfhtml.org/wiki/Beispiel:Schreinerei_Meier_formate3.css

mit id für ein div/aside in Kapitel 7:

https://wiki.selfhtml.org/wiki/Beispiel:Schreinerei_Meier_formate4.css

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

ich guck mir das gleich mal an, ich bin gerade beim Überfliegen der Kapitel 2-5 bei den Links hängen geblieben, wo Du ganz stolz die Attribute als Neuigkeit einführst. Dummerweise hatte ich das schon in Kapitel 1 vorweggenommen (weil die <head> Elemente ja Attribute verwenden und ich das erklären wollte), darum habe ich das in #4 ein bisschen umformatiert.

Dabei fällt mir auf: Ist die Beispielvorlage kaputt? Wenn ein Beispiel gemacht wird, dann steht da sowas wie {{Beispiel|titel = für ein Dings|... und ich meine auch, dass dann früher mal die Überschrift Beispiel für ein Dings daraus geworden wäre. Das ist aber nicht mehr der Fall, das Wort „Beispiel“ wird nicht mehr generiert. Es sieht aber merkwürdig aus, wenn ein Beispiel mit den Worten „für ein Dings“ statt mit „Beispiel für ein Dings“ eingeleitet wird.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

ich guck mir das gleich mal an, ich bin gerade beim Überfliegen der Kapitel 2-5 bei den Links hängen geblieben, wo ~Du~ ganz stolz die Attribute als Neuigkeit einführst.

Nicht ich, das Tutorial stammt von Stonie und MatthiasB

Dummerweise hatte ich das schon in Kapitel 1 vorweggenommen (weil die <head> Elemente ja Attribute verwenden und ich das erklären wollte), darum habe ich das in #4 ein bisschen umformatiert.

Ja, das ist das Problem des Grundlayouts. Eigentlich wollte MatthiasB ja alles Stück für Stück erklären.

Siehe: Diskussion:HTML/Tutorials/Einstieg (an die man aber nur noch indrekt rankommt: Sidebar: Links auf diese Seite)

Andererseits sollte so ein Gerüst eben vollständig sein, also auch mit lang="de"-Attribut und dem Meta-Viewport; charset ist ja auch ein Attribut. Deshalb finde ich es ok, wenn so ein Praxis-Tutorial am Anfang eine Kopiervorlage verwendet (und auch kurz erklärt)

Dabei fällt mir auf: Ist die Beispielvorlage kaputt? Wenn ein Beispiel gemacht wird, dann steht da sowas wie {{Beispiel|titel = für ein Dings|... und ich meine auch, dass dann früher mal die Überschrift Beispiel für ein Dings daraus geworden wäre. Das ist aber nicht mehr der Fall, das Wort „Beispiel“ wird nicht mehr generiert.

Das hatten wir mal geändert, da bei kleinen Schnipseln immer das Beispiel davorstand .

Es sieht aber merkwürdig aus, wenn ein Beispiel mit den Worten „für ein Dings“ statt mit „Beispiel für ein Dings“ eingeleitet wird.

Ja, da geh ich noch mal durch und formuliere die Titel um.

Generell bleibt anzumerken, dass das Tutorial aus (dem unveröffentlichten) SELFHTML9 stammt und MatthiasB es dann 2010 - 2015 weitergeführt hat. Ich bin erst durch den Thread slideshow-html von Idna001 drauf gekommen, da mal wieder drüberzuschauen.

Ich hatte immer gedacht @Felix Riesterer Vorschlag eines HTML-Kurses als eigenes Tutorial zu veröffentlichen. Das hätte dann aber zu viele Dopplungen gegeben. In Kapitel 2 habe ich diese Idee jetzt umgesetzt.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

danke für den Blick in die Historie. Ich bin zwar schon ein paar Jahre hier, aber nicht so lange. Deswegen kann es mir auch immer mal passieren, dass ich Dinge ändere, die absichtlich anders waren - weil ich die Absicht nicht kannte.

Ich will aber auch nicht vor jedem Tastendruck nachfragen, ob das so in Ordnung geht. Das dürfte arg nervig für Dich werden. Also - wenn Du siehst, dass ich mich vergaloppiere, pfeif mich gern zurück.

Was mir in dem Tutorial nicht ganz klar ist: Was möchtest Du von der Leserin? Dass sie die Dateien Stück für Stück auf ihrem Computer nachbaut? Das ist teilweise so geschrieben. Andererseits wird man aber auch aufgefordert, Sachen im Frickl zu machen. Ich finde, da sollte man einheitlich vorgehen. Entweder alles im Frickl, oder alles lokal. Wenn lokal, würde ich auch keine Frickls anbieten.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

danke für den Blick in die Historie. Ich bin zwar schon ein paar Jahre hier, aber nicht so lange. Deswegen kann es mir auch immer mal passieren, dass ich Dinge ändere, die absichtlich anders waren - weil ich die Absicht nicht kannte.

Ich will aber auch nicht vor jedem Tastendruck nachfragen, ob das so in Ordnung geht. Das dürfte arg nervig für Dich werden. Also - wenn Du siehst, dass ich mich vergaloppiere, pfeif mich gern zurück.

Was mir in dem Tutorial nicht ganz klar ist: Was möchtest Du von der Leserin? Dass sie die Dateien Stück für Stück auf ihrem Computer nachbaut? Das ist teilweise so geschrieben. Andererseits wird man aber auch aufgefordert, Sachen im Frickl zu machen. Ich finde, da sollte man einheitlich vorgehen. Entweder alles im Frickl, oder alles lokal. Wenn lokal, würde ich auch keine Frickls anbieten.

Mist, das war ursprünglich ja ohne Blick auf Frickl geschrieben, hatte aber trotzdem die Links auf die Dateien im Beispiel-Namensraum.

Gerade bei Kapitel 6 fänd ich das eigene Rumprobieren aber gar nicht schlecht und hatte das jetzt bis 1000_tolle_Sachen,_die_man_mit_CSS_machen_kann so umgearbeitet.

Auch die von mir vorhin angesprochene Schriftgröße_von_Listen_und_Preistabelle mit dem folgenden li li, bzw wohl ul ullässt sich besser im Frickl ausprobieren.

Die externe CSS-Datei formate.css benötigt man imho aber nicht in 4 Versionen - dann eher als Teil eines zip-Downloads unter src.selfhtml.org.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Gerade bei Kapitel 6 fänd ich das eigene Rumprobieren aber gar nicht schlecht

Ja ok, für manche Dinge stellt man besser eine Spielwiese bereit. Sonst hat die Leserin sich ihre lokalen Dateien nachher komplett zerschossen.

Wobei das auch eine Lektion ist: Bevor man etwas ändert, sollte man sichern, sichern, sichern 😀

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

Gerade bei Kapitel 6 fänd ich das eigene Rumprobieren aber gar nicht schlecht

Ich habe das jetzt vorerst fertig: Kapitel 6 - Gestaltung mit CSS

Die Theorie habe ich zugunsten einer Infografik gekürzt.

Die ersten zwei Abschnitte laden zum Ausprobieren mit dem Frickl ein; im 3. Abschnitt wird die formate.css dann lokal gespeichert.

Kapitel 7

In Kapitel 7 soll es ja einerseits um Klassen und id, andererseits um Breiten und Innnen- und Außenabstände gehen.

Ich hatte schon mal überlegt anstelle des div ein aside zu verwenden. Die Telefonnummer im p-Absatz gefällt mir nicht. Evtl. könnte man ja address und dl einführen?

  <h2>Kontakt</h2>
  <address>
    <dl>
      <dt>Tel.</dt>
      <dd><a href="tel:[phone]">089 0000 0000</a></dd>


      <dt>Öffnungszeiten</dt>
      <dd><span>Mo–Fr:</span> <span>7:00–21:00 Uhr</span></dd>			
      <dd><span>Sa:</span> <span>9:00–15:00 Uhr</span></dd>

      <dt>E-Mail Adresse</dt>
      <dd><a href="mailto:[e-mail]">[e-mail]</a></dd>

      <dt>Geschäftsadresse</dt>
      <dd>Fiktives Unternehmen<br/>
        Musterstraße 93<br/>
        80331 München
      </dd>


    </dl>
  </address>

Oder würde das Anfänger erschlagen?

Eigentlich will ich nicht bis zu media queries und grid kommen, ein Hinweis auf den Seiteninspektor wäre aber gut.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

      <dt>Tel.</dt>
      <dd><a href="tel:[phone]">089 0000 0000</a></dd>

      <dt>Öffnungszeiten</dt>
      <dd><span>Mo–Fr:</span> <span>7:00–21:00 Uhr</span></dd>			
      <dd><span>Sa:</span> <span>9:00–15:00 Uhr</span></dd>

Die Leerzeichen in der Telefonnummer und vor „Uhr“ sollten NBSP sein (wenn ein Zeilenumbruch nicht per CSS verhindert wird).

Es bietet sich an, die Bis-Striche zu escapen, damit der Unterschied zu den Bindestrichen (wie in der Telefonnummer) auch in für Code meist verwendeter dicktengleicher Schrift deutlich wird.

      <dt>Tel.</dt>
      <dd><a href="tel:[phone]">089&nbsp;00000000</a></dd>

      <dd><span>Mo&ndash;Fr:</span> <span>7:00&ndash;21:00&nbsp;Uhr</span></dd>			
      <dd><span>Sa:</span> <span>9:00&ndash;15:00&nbsp;Uhr</span></dd>

      <dt>E-Mail Adresse</dt>

Da fehlt ein Bindestrich.

😷 LLAP

[Matthias Scharwies]

Servus!

Da fehlt ein Bindestrich.

😷 LLAP

Danke!!!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Kapitel 6

Ich bin mal mutig gewesen und habe den Abschnitt "Grundprinzip" umgestaltet. Ich hoffe, das ist ok so.

Kapitel 7

Semantik ist vermutlich viel Verhandlungssache. Und es mag sein, dass das W3C nur an akademische Papers denkt. Aber wenn man sich in der Spec durchliest, welchem Zweck das <address> Element dienen soll, dann ist es eben nicht dafür da, eine beliebige Adresse zu markieren, sondern Kontaktinformationen zum Autor des Dokuments, das auf der Seite dargestellt wird.

https://html.spec.whatwg.org/multipage/sections.html#the-address-element

Sie schreiben auch, dass man für allgemeine Adressen <p> verwenden solle.

Auf der Kontakt-Seite befindet sich kein Dokument. Sondern die Adresse des Seitenanbieters, bzw. die Adresse des Unternehmens, über das die Seite informiert. Insofern überschneiden sich hier die Autoren-Adresse und eine allgemeine Adresse etwas. Aus meiner Sicht stellt Adresse auf der Kontakt-Seite aber eher nicht die Autorenadresse dar. Allein schon die Anwesenheit der Öffnungszeiten spricht gegen eine Autorenreferenz.

Rolf

[Gunnar Bittersmann]

@@Rolf B

https://html.spec.whatwg.org/multipage/sections.html#the-address-element

Sie schreiben auch, dass man für allgemeine Adressen <p> verwenden solle.

Wieder mal so ’ne Stelle, wo die WHATWG-Spec und die W3C-Spec was anderes sagen. Dort heißt es nämlich:

“The address element represents contact information for a person, people or organization.”

Finde ich sinnvoller. Aber was weiß ich schon? Die WHATWG weiß ja alles besser.

Auf der Kontakt-Seite befindet sich kein Dokument. Sondern die Adresse des Seitenanbieters, bzw. die Adresse des Unternehmens, über das die Seite informiert. Insofern überschneiden sich hier die Autoren-Adresse und eine allgemeine Adresse etwas. Aus meiner Sicht stellt Adresse auf der Kontakt-Seite aber eher nicht die Autorenadresse dar. Allein schon die Anwesenheit der Öffnungszeiten spricht gegen eine Autorenreferenz.

Der Autor der Kontaktseite ist die Organisation, die die Website betreibt. Da passt address auch gemäß der WHATWG-Spec.

😷 LLAP

[Rolf B]

Hallo Gunnar,

Semantik ist vermutlich viel Verhandlungssache.

Man kann es vermutlich so deuten, dass <address> passt. Die Frage ist, wie es die Hersteller von Screenreadern oder Webcrawlern deuten, denn <address> ist ja nur dann wirklich sinnvoll, wenn damit etwas sehr spezifisches geschieht. Als Selektor für Styles genügt eine Klasse.

Rolf