HN vorgestellt: HTML für Menschen

 (htmlforpeople.com)
4 Punkte von GN⁺ 2024-10-11 | 1 Kommentare | Auf WhatsApp teilen
  • HTML for People ist ein Webbuch für Einsteiger, das Menschen außerhalb der Tech-Branche dabei hilft, mit HTML selbst Websites zu erstellen
  • Es versteht HTML als Dokumentenformat des Webs, das jede und jeder nutzen kann, und nimmt es als Ausgangspunkt für die Website-Erstellung
  • Es ist so aufgebaut, dass man auch ohne Erfahrung im Erstellen von Websites oder im Programmieren von Grund auf eine Website bauen kann
  • Blake Watson erstellt seit den frühen 2000er-Jahren Websites und schrieb das Buch aus der Überzeugung heraus, dass jede und jeder HTML lernen können sollte
  • Der Fokus liegt darauf, die nötigen Inhalte auf zugängliche und freundliche Weise zu vermitteln und so die Einstiegshürde für Anfänger zu senken

HTML, das jede und jeder nutzen kann

  • HTML ist kein Werkzeug nur für Menschen aus der Technik, sondern ein Format, das allen offensteht, die selbst Websites erstellen möchten
  • Wenn man HTML als Dokumenttyp versteht, aus dem das Web besteht, kann man auch ohne komplexe Tools mit dem Erstellen von Websites beginnen

Ein Webbuch für Einsteiger

  • HTML for People ist ein einsteigerfreundliches Webbuch, dem auch Menschen ohne Erfahrung im Erstellen von Websites oder im Programmieren folgen können
  • Blake Watson erstellt seit den frühen 2000er-Jahren Websites und ist auch in seiner beruflichen Arbeit der Ansicht, dass jede und jeder mit HTML Websites erstellen können sollte
  • Das Buch führt auf zugängliche und freundliche Weise durch die Inhalte, die für den Einstieg nötig sind

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-10-11
Meinungen auf Hacker News

  • Gute Entscheidung, sich auf https://simplecss.org/ zu stützen, statt CSS direkt zu behandeln. CSS ist ein völlig eigenes Gebiet und kann ziemlich belastend werden, wenn man es auf grundlegendes HTML obendrauf setzt.
    Allerdings macht mir „Schritt 1. Einen Ordner auf deinem Computer erstellen“ unter https://htmlforpeople.com/zero-to-internet-your-first-websit... ein wenig Sorgen. Heutzutage scheint es ziemlich viele Menschen zu geben, die Dateien und Ordner überhaupt nicht verstehen: https://www.theverge.com/22684730/students-file-folder-direc...
    Andererseits würde es sich redundant anfühlen, ein ganzes Buchkapitel der Erklärung von Dateien und Ordnern zu widmen; stattdessen wäre gutes Einführungsmaterial zum Verlinken hilfreich.

    • Es ist erstaunlich, wie schlimm die Mobile-Epidemie geworden ist. Selbst unter Studierenden, die ein Informatikstudium beginnen, gibt es Fälle, in denen sie nicht wissen, wie man eine zip-Datei entpackt oder wo heruntergeladene Dateien liegen.
      Nebenbei: Die Studierenden dieser Art, die ich kenne, haben vor dem zweiten Studienjahr abgebrochen.
    • Dateien und Ordner nicht kennen? Hier schüttle ich die Faust und beharre darauf, dass es kein „Ordner“, sondern ein Verzeichnis ist ;)
    • Ich war immer ein wenig enttäuscht davon, wie die meisten Webbrowser HTML-Seiten ohne explizite Stilinformationen rendern.
      Das heißt nicht, dass Browser-Defaults einen so ausgeprägten Geschmack wie simple.css haben sollten, aber die Standardabstände, das Padding, die Schriftstile, Überschriften usw. sind nicht besonders attraktiv.
      Webentwickler mit klaren Vorlieben werden die Defaults ohnehin überschreiben, aber ich frage mich, ob es mehr reine HTML-Personalseiten und Blogs gegeben hätte, wenn hübschere Defaults üblich gewesen wären.
    • Der Anfang vom Ende war, als Apps oder Web-Apps beim Öffnen nicht mehr ein neues Dokument öffneten, sondern eine Liste der zuletzt verwendeten Dokumente anzeigten.
      Wenn man eine Datei brauchte, musste man nur die App für diese Datei öffnen und nach unten scrollen; dadurch musste man das Modell nicht verstehen, dass Dateien unabhängig von Apps existieren und in Apps erstellt oder betrachtet werden können.
      Ich denke, dass das Fehlen eines Dateimanagers in iOS diese Entwicklung verfestigt hat.
    • Ich glaube nicht, dass das ein Generationenproblem ist. Es ist eher so, dass reine Faulheit sich epidemieartig ausgebreitet hat.
      Denkmodelle wie „alles irgendwie zusammen in den Wäschekorb werfen und bei Bedarf herausziehen“ oder Aussagen wie „ich versuche aufzuräumen, aber wenn es zu viele Dateien werden, entsteht Chaos“ zeigen das gut.
      Wie viele auf HN bin ich sehr vertraut mit Computern und habe auch versucht, das Datei-/Ordner-Modell zu vermeiden, aber am Ende keinen Weg gefunden. Egal wie „fortgeschritten“ es aussieht, andere Ansätze brechen zusammen.
      LLMs könnten das ändern, aber bisher gibt es keine Methode, bei der der Computer vorhersagt, was ich will und nicht will, und es für mich organisiert.

  • Ich halte den grundlegenden Ansatz dieses Projekts für sehr wertvoll für die Welt.
    Genau solche Bildung zu offenen Standards könnte ein mächtiges Werkzeug sein, um uns von großen, undurchsichtigen Unternehmen zu lösen und zu dem auf offenen Standards basierenden System zurückzukehren, mit dem das Internet begann.
    Ich hoffe, es wird weiter aktualisiert und dass mehr Menschen es sehen und beitragen. Wer ähnlich denkt, sollte zumindest einen GitHub-Stern vergeben: https://github.com/blakewatson/htmlforpeople
    Zur Klarstellung: Ich habe bisher keinerlei Verbindung zu diesem Projekt und profitiere nicht davon, das zu sagen.

    • Mozilla hat seit Jahren hervorragende Dokumentation.
      Es gibt auch einen Abschnitt mit grundlegenden HTML-Tutorials: https://developer.mozilla.org/en-US/docs/Learn/HTML
      Es ist nicht so, als hätte jemand die Leute daran gehindert, HTML zu lernen.
    • Ich hoffe wirklich, dass das passiert. Ich frage mich, was geschehen würde, wenn normale Menschen HTML zu lernen als praktische und nützliche Alternative zum Erreichen ihrer Ziele empfinden würden, statt Dutzende Stunden damit zu verbringen, WordPress oder MS Word zu lernen.
    • Ich bin der OP. Danke für die netten Worte. Ich hoffe, dieses Material gelangt in die Hände von Nicht-Fachleuten.

  • Gut gemacht. Mir gefällt sehr, dass zuerst gezeigt wird, dass man reinen Text schreiben und veröffentlichen kann und dass es sofort funktioniert, bevor dann ganz natürlich zu HTML übergeleitet wird.
    Der Text ist klar, einladend und gut strukturiert, sodass er leicht und angenehm zu lesen wirkt. Ich glaube, HTML in die Hände von Nicht-Fachleuten zu geben, ist ein gutes Ziel.
    Ein paar Punkte als Feedback: Der Teil zur Zeichenkodierung scheint ziemlich spät zu kommen. Für Menschen, die Englisch gewohnt sind, ihre Website aber in ihrer eigenen Sprache schreiben wollen, oder deren Name Akzente enthält, kann das überraschend sein. Statt es nur als etwas für Sonderzeichen wie Emojis darzustellen, wäre es besser zu sagen, dass es für die meisten Sprachen außerhalb von reinem ASCII notwendig ist.
    Die Tags body, head und html sind meist auch ohne explizite Angabe optional, aber html ist wegen des lang-Attributs nützlich für Barrierefreiheit und um falsche Übersetzungsvorschläge einiger Browser zu verhindern.
    VS Code ist wegen der Telemetrie etwas bedauerlich und wirkt für die Aufgabe schwergewichtig und komplex. Unter Windows ist Notepad++ eine gute Wahl, unter Linux reicht der vorinstallierte Texteditor. Es gibt auch Codium, ohne die schlechten Teile. Die Zielgruppe kennt diese schlechten Teile nicht und installiert dadurch unbewusst Spyware.
    Die Funktion aria-current="page" kannte ich nicht, aber ich werde sie wohl künftig verwenden.

    • Muss man, um dieses Tag einzufügen, nicht von Anfang an den Texteditor so einstellen, dass er als UTF-8 speichert? Verwendet Notepad zum Beispiel nicht standardmäßig UTF-16, wie andere Dinge unter Windows?
    • Die große Komplexität liegt hier darin, dass die Leute Zeichenkodierung an sich nicht kennen. Deshalb kann man schwer erwarten, dass sie index.html von Anfang an als UTF-8 speichern.
      Zum Beispiel wird Windows Notepad standardmäßig wohl die aktive Codepage verwenden. Wenn man auch das Speicherproblem behandeln kann, stimme ich zu, dass dieser Inhalt deutlich sichtbarer platziert werden sollte.

  • Die Idee ist wirklich gut, und es ist schön, dass es mehr solcher Websites gibt, aber ich denke, sie setzt ein Maß an Computerkompetenz voraus, das man von normalen, nichttechnischen Nutzern kaum erwarten kann.
    Schritt 1 beginnt mit „Wählen Sie auf Ihrem Computer einen Ort aus und erstellen Sie einen Ordner. Geben Sie ihm einen Namen wie my-site“ – und genau dort könnte man bereits die meisten Leute verlieren.
    Es gibt erstaunlich viele Menschen, die jeden Tag einen Computer benutzen und trotzdem nicht wissen, wie das geht.

    • Es kommt mir seltsam vor, dass dieser Punkt in diesem Thread immer wieder betont wird.
      Ich finde es schwer zu glauben, dass Menschen, die täglich einen Computer nutzen, nicht wissen, wie man einen Ordner erstellt. Sogar meine Mutter, die kaum einen Computer benutzt, weiß vermutlich, was Ordner und Dateien sind.
      Ist jemand, der nicht weiß, was Dateien und Ordner sind, nicht ohnehin kaum ein unmittelbarer Nutznießer dieses Leitfadens? Vorher müsste man deutlich grundlegendere Dinge lernen.
    • Viele HN-Nutzer haben die Seite wahrscheinlich ebenfalls auf einem mobilen Gerät angesehen und waren wohl nicht in der Lage, die Anweisungen sofort nachzuvollziehen.
    • Wenn das stimmt, ist es sehr traurig. Sind die Fähigkeiten der Leute wirklich so weit geschrumpft? Selbst als kleines Kind hätte ich diese Anweisungen befolgen können, und tatsächlich habe ich mit 10 meine eigene Website gebaut.
      Ist es wirklich so schlimm, oder misstraut man den Leuten da nicht zu sehr? Liegt es daran, dass heute alles über Cloud-Apps erledigt wird?
    • Ich bin der OP. Mir hat dieser Teil auch ein wenig Sorgen gemacht, und ich habe es in der Einführung bis zu einem gewissen Grad erwähnt, aber ich glaube, ich sollte noch mehr darauf eingehen.
      Ich überlege, ob ich selbst ein Einsteiger-Tutorial zum Erstellen von Dateien und Ordnern schreibe und hoste oder ob ich auf solche Grundlagenmaterialien verlinke.

  • Ich habe schon mehrfach versucht, Nichttechnikern klarzumachen, dass sie sehr leicht ihre eigene Website erstellen können, aber meistens halten sie das für einen Witz oder glauben, es erfordere enormen Aufwand.
    Nächstes Mal werde ich ihnen diese Seite zeigen und sie bitten, nur 30 Minuten zu investieren und zu sehen, was sie in dieser Zeit bauen können. Ich weiß, dass viele Leute angefixt wären, sobald sie diesen ersten Geschmack von „Wow, ich habe tatsächlich etwas im Web veröffentlicht!“ bekommen.
    @blakewatson: Hast du vor, der Website Internationalisierung hinzuzufügen und Pull Requests für Übersetzungen anzunehmen?

    • Ja! Das würde ich wirklich gern tun. Ich muss das README aktualisieren, aber ich denke über eine Strategie nach, bei der übersetzte Kapitel in Unterordnern wie /es liegen.
      Eleventy lässt sich so konfigurieren, dass es je nach Unterpfad unterschiedliche Navigationsmenüs erzeugt.
    • In der Schule sollte man so etwas wirklich unterrichten. In der Highschool und an der Uni habe ich mehrere persönliche Websites gebaut, und es war einfach nur HTML und ein bisschen CSS.
      Ich finde, das sollte für alle der erste Schritt sein. Es ist eine großartige Möglichkeit, etwas zu schreiben und das Ergebnis schnell und einfach zu sehen. Nicht einmal ein Server ist nötig.

  • Warum „Start coding already!“? Wäre eine Formulierung wie „Start writing already?“ nicht besser?
    Die Hälfte der Hürde, die Leute beim Erstellen einer Website sehen, besteht darin, dass sie glauben, programmieren können zu müssen, und das wirkt abschreckend. Dagegen wissen sie, worüber sie schreiben wollen, und das ist viel zugänglicher.

    • Ich habe es in „Get started already“ geändert :)
    • Ich bin der OP. Oh, guter Vorschlag. Es ist schwer, das Webentwickler-Ich abzulegen und mit frischem Blick daraufzuschauen. Selbst wenn man es bewusst versucht.

  • Mir gefällt, dass es mit einer kleinen HTML-Datei beginnt und einen nicht sofort auffordert, NodeJS, VS Code und allerlei Webentwicklungs-Krimskrams zu installieren.

    • Eine Lektion, die viele Profis neu lernen müssen. Man braucht tatsächlich nicht Hunderte MB JavaScript, um einfachen Text und Bilder anzuzeigen.
      Barrierefreiheit und graceful degradation werden viel zu oft ignoriert.

  • Mir gefällt die Reihenfolge des Tutorials, bei der man zuerst schnell etwas Einfaches deployt.
    Man erstellt mit Notepad/TextEdit eine reine Textdatei index.html, veröffentlicht sie irgendwo wie Neocities und fügt dann Inhalte mit Überschrift und Bild hinzu.
    Erst danach macht man daraus mit head, body usw. ordentliches HTML und steigt von Notepad/TextEdit auf Visual Studio Code um.

    • Du weißt es vermutlich schon, aber in HTML5 sind html, head und body optional; auch ohne sie ist es ein gültiges Dokument.

  • Ein großartiger Versuch, und auch sehr gut umgesetzt. Ich werde es als Lesezeichen speichern, um es anderen zu zeigen.
    Vor Kurzem habe ich beschlossen, Inhalte auf meiner Website nur noch mit handgeschriebenem HTML hinzuzufügen und ältere Beiträge nach und nach ebenfalls zu übertragen. Mir gefällt an HTML, dass es direkt ist, dass temporäre Änderungen pro Seite einfach sind und dass es robust ist.
    Nachdem ich fast jedes System zum Veröffentlichen im Web ausprobiert habe, bin ich zu dem Schluss gekommen, dass HTML das richtige Werkzeug für diese Aufgabe ist, auch wenn es am Anfang etwas mehr Arbeit macht.
    Als pensionierter Entwickler spiele ich, wenn mir danach ist, mit Dingen wie Rust, SQL oder Embedded herum, aber wenn ich schreiben will, will ich einfach schreiben. HTML macht das bis zu einem gewissen Grad möglich.
    Wenn mehr Menschen HTML nicht nur als bloßes Build-Ziel, sondern als zu schreibendes Dokument betrachten würden, wären unsere Systeme wahrscheinlich viel einfacher. Die heutige Denkweise hat durchschnittliche Computer-/Webnutzer stark ausgebremst und auch Entwicklern große Kopfschmerzen bereitet.
    Ich weiß nicht, wem die Komplexität, die wir in die Welt gebracht haben, in 99 % der Fälle hilft. Dieses Material könnte einer der Anstöße sein, die uns wieder in die richtige Richtung schieben.