HN en accès libre : HTML pour les gens

 (htmlforpeople.com)
4 points par GN⁺ 2024-10-11 | 1 commentaires | Partager sur WhatsApp
  • HTML for People est un webbook d’introduction conçu pour aider même les personnes hors du secteur tech à créer directement leur propre site web en HTML
  • Il présente HTML comme un format de document du Web que tout le monde peut utiliser, et en fait le point de départ de la création d’un site web
  • Il est structuré pour permettre de suivre la démarche de création d’un site web dès le début, même sans expérience préalable en création de sites ou en programmation
  • Blake Watson crée des sites web depuis le début des années 2000 et a écrit ce livre avec l’idée que tout le monde devrait pouvoir apprendre HTML
  • L’accent est mis sur une présentation du nécessaire accessible et conviviale, afin de réduire la barrière à l’entrée pour les débutants

HTML à la portée de tous

  • HTML n’est pas un outil réservé aux professionnels de la tech, mais un format ouvert à toute personne souhaitant créer elle-même un site web
  • Comprendre HTML comme un type de document qui constitue le Web permet de commencer à créer un site sans outils complexes

Un webbook pour débutants

  • HTML for People est un webbook pensé pour les débutants, que même des personnes sans expérience en création de sites ou en programmation peuvent suivre
  • Blake Watson crée des sites web depuis le début des années 2000 et, tout en travaillant dans son domaine professionnel, estime que chacun devrait pouvoir créer un site web en HTML
  • Le livre guide le lecteur à travers l’essentiel pour démarrer, de manière accessible et conviviale

À lire aussi

1 commentaires

 
GN⁺ 2024-10-11
Avis sur Hacker News

  • Bon choix de ne pas manipuler directement CSS et de s’appuyer sur https://simplecss.org/. CSS est un domaine complètement à part, et l’ajouter par-dessus du HTML de base peut vite devenir assez lourd
    En revanche, « Étape 1. Créer un dossier sur votre ordinateur » dans https://htmlforpeople.com/zero-to-internet-your-first-websit... m’inquiète un peu. Aujourd’hui, il semble y avoir pas mal de gens qui ne comprennent pas du tout les fichiers et les dossiers : https://www.theverge.com/22684730/students-file-folder-direc...
    Cela dit, consacrer tout un chapitre du livre à expliquer les fichiers et dossiers donnerait l’impression d’un doublon ; ce serait bien d’avoir plutôt une bonne ressource d’introduction vers laquelle faire un lien

    • Je suis surpris de voir à quel point la pandémie du mobile est devenue grave. Même parmi les étudiants qui arrivent en informatique, certains ne savent pas décompresser un zip ou ne retrouvent pas où sont leurs fichiers téléchargés
      À titre indicatif, les étudiants de ce genre que je connais ont abandonné avant la deuxième année
    • Ne pas connaître les fichiers et les dossiers ? Ici, on agite le poing en insistant sur le fait que ce ne sont pas des « dossiers », mais des répertoires ;)
    • J’ai toujours été un peu déçu par la façon dont la plupart des navigateurs web rendent une page HTML sans informations de style explicites
      Je ne veux pas dire que les valeurs par défaut des navigateurs devraient avoir un parti pris aussi marqué que simple.css, mais les marges, le padding, les styles de texte et les titres par défaut ne sont pas particulièrement attrayants
      Les développeurs web au goût affirmé écraseront les valeurs par défaut quoi qu’il arrive, mais je me demande si, avec de meilleures valeurs par défaut comme convention, il y aurait eu davantage de sites personnels et blogs en HTML pur
    • Le début de la fin a été le moment où, à l’ouverture d’une application ou d’une appli web, on a commencé à afficher une liste des documents récents au lieu d’ouvrir un nouveau document
      Si on avait besoin d’un fichier, il suffisait d’ouvrir l’appli correspondant à ce fichier et de faire défiler vers le bas ; il n’était donc plus nécessaire de comprendre le modèle selon lequel les fichiers existent indépendamment des applications, tout en pouvant être créés ou consultés dans celles-ci
      À mon avis, l’absence de gestionnaire de fichiers dans iOS a renforcé cette évolution
    • Je ne pense pas que ce soit une question de génération. C’est plutôt une paresse pure et simple qui s’est répandue comme une épidémie
      Le modèle mental du type « je mets tout en vrac dans le panier à linge et je sors ce dont j’ai besoin », ou l’idée selon laquelle « on essaie de ranger, mais dès qu’il y a trop de fichiers, ça devient le bazar », l’illustrent bien
      Comme beaucoup de gens sur HN, je suis très à l’aise avec les ordinateurs, et j’ai même essayé d’éviter le modèle fichiers/dossiers, mais je n’ai finalement pas trouvé de solution. Aussi « avancées » qu’elles puissent paraître, les autres approches finissent par s’effondrer
      Les LLM pourraient changer les choses, mais jusqu’à présent, il n’existe pas de méthode permettant à l’ordinateur de deviner ce que je veux et ne veux pas, puis de l’organiser pour moi

  • L’approche de base de ce projet me paraît extrêmement précieuse pour le monde
    Ce type d’enseignement des standards ouverts pourrait être un outil puissant pour nous éloigner des grandes entreprises opaques et revenir au système fondé sur les standards ouverts avec lequel Internet a commencé
    J’espère qu’il continuera à être mis à jour, et que davantage de personnes le verront et y contribueront. Si vous pensez pareil, ce serait bien de mettre au moins une étoile sur GitHub : https://github.com/blakewatson/htmlforpeople
    Pour info, je n’ai jusqu’ici aucun lien avec ce projet, et je ne gagne rien à dire cela

    • Mozilla dispose depuis des années d’une excellente documentation
      Il y a aussi une section de tutoriel HTML de base : https://developer.mozilla.org/en-US/docs/Learn/HTML
      Personne n’empêchait les gens d’apprendre HTML
    • J’aimerais vraiment que cela arrive. Je me demande ce qui se passerait si, au lieu de passer des dizaines d’heures à apprendre WordPress ou MS Word, le grand public trouvait aussi l’apprentissage de HTML pratique et utile pour atteindre ses objectifs
    • Je suis l’OP. Merci pour ces mots encourageants. J’aimerais que cette ressource arrive entre les mains de non-spécialistes

  • C’est bien fait. J’aime beaucoup la façon dont on montre d’abord qu’on peut écrire et publier du texte brut et que ça fonctionne immédiatement, avant de passer naturellement à HTML
    Le texte est clair, accueillant, bien structuré, et il semble facile et agréable à lire. Je crois que mettre HTML entre les mains de non-spécialistes est un bon objectif
    Quelques retours : le contenu sur l’encodage des caractères semble arriver assez tard. Quelqu’un qui est à l’aise en anglais mais veut écrire son site web dans sa propre langue, ou dont le nom comporte des accents, pourrait être surpris. Plutôt que de présenter cela seulement comme utile pour les caractères spéciaux comme les emoji, il vaudrait mieux dire que c’est indispensable pour la plupart des langues qui ne sont pas en pur ASCII
    Les balises body, head et html sont pour la plupart optionnelles, mais html est utile grâce à l’attribut lang, pour l’accessibilité et pour éviter les mauvaises suggestions de traduction de certains navigateurs
    VS Code me déçoit un peu à cause de la télémétrie, et il paraît lourd et complexe par rapport à la tâche. Sous Windows, Notepad++ est un bon choix ; sous Linux, l’éditeur de texte installé par défaut suffit. Il y a aussi Codium, sans les mauvais côtés. Le public visé ne connaît pas ces mauvais côtés, donc il se retrouve à installer un spyware sans le savoir
    Je ne connaissais pas la fonctionnalité aria-current="page", mais je pense que je vais commencer à l’utiliser

    • Pour mettre cette balise, ne faut-il pas d’abord configurer l’éditeur de texte pour enregistrer en UTF-8 ? Par exemple, Notepad n’utilise-t-il pas UTF-16 par défaut, comme d’autres éléments de Windows ?
    • La grande complexité ici, c’est que les gens ne connaissent pas le concept même d’encodage des caractères. Il est donc difficile de s’attendre à ce qu’ils enregistrent index.html en UTF-8 dès le départ
      Par exemple, Windows Notepad utilisera probablement la page de codes active par défaut. Si l’on peut aussi traiter la question de l’enregistrement, je suis d’accord pour dire que ce point devrait apparaître plus clairement

  • L’idée est vraiment excellente et je me réjouis de voir davantage de sites comme celui-ci, mais je pense qu’elle suppose un niveau de maîtrise de l’ordinateur difficile à attendre d’utilisateurs non techniques ordinaires
    La première étape commence par « choisissez un emplacement sur votre ordinateur et créez un dossier. Donnez-lui un nom comme my-site », et c’est déjà là qu’on risque de perdre la majorité des gens
    Il y a un nombre étonnant de personnes qui utilisent un ordinateur tous les jours sans savoir comment faire ça

    • Je trouve étrange que ce point revienne sans cesse dans ce fil
      J’ai du mal à croire que quelqu’un qui utilise un ordinateur tous les jours ne sache pas créer un dossier. Même ma mère, qui utilise à peine un ordinateur, sait ce que sont un dossier et un fichier
      Quelqu’un qui ne sait pas ce que sont les fichiers et les dossiers ne risque-t-il pas de ne pas être un bénéficiaire immédiat de ce guide ? Il lui faudrait apprendre des choses bien plus élémentaires avant cela
    • Il est aussi probable qu’une bonne partie des utilisateurs de HN aient consulté la page sur un appareil mobile, et n’étaient donc pas vraiment en situation de suivre les consignes immédiatement
    • Si c’est vrai, c’est très triste. Les gens en sont-ils vraiment arrivés là ? Même enfant, j’aurais pu suivre ces consignes, et j’ai effectivement créé mon site web à 10 ans
      Est-ce vraiment si grave, ou bien ne doute-t-on pas trop vite des gens ? Est-ce parce qu’on fait désormais tout avec des applications cloud ?
    • Je suis l’OP. Cela m’a aussi un peu inquiété, et je l’ai évoqué dans une certaine mesure dans l’introduction, mais je pense qu’il faut que j’en parle davantage
      J’hésite entre écrire et héberger moi-même un support d’introduction à la création de fichiers et de dossiers, ou bien renvoyer vers ce type de ressources de base

  • J’ai essayé plusieurs fois de convaincre des personnes non techniques qu’elles pouvaient créer très facilement leur propre site web, mais la plupart le prennent pour une blague ou pensent que cela demande un effort énorme
    La prochaine fois, je compte leur montrer ce site et leur demander d’y consacrer seulement 30 minutes pour voir ce qu’elles peuvent créer dans ce laps de temps. Je sais que beaucoup accrocheront dès qu’elles auront goûté à ce « Waouh, j’ai vraiment publié quelque chose sur le web ! »
    @blakewatson : as-tu prévu d’ajouter l’internationalisation au site et d’accepter des pull requests de traduction ?

    • Oui ! J’aimerais vraiment le faire. Il faut que je mette à jour le README, mais je pense à une stratégie où les chapitres traduits seraient placés dans des sous-dossiers comme /es
      On peut configurer Eleventy pour générer des menus de navigation différents selon le sous-chemin
    • C’est vraiment le genre de choses qu’on devrait enseigner à l’école. Au lycée et à l’université, j’ai créé plusieurs sites personnels, juste avec du HTML et un peu de CSS
      Je pense que cela devrait être la première étape pour tout le monde. C’est une excellente façon d’écrire quelque chose et d’en voir le résultat rapidement et facilement. Pas même besoin de serveur

  • Pourquoi « Start coding already! » ? « Start writing already? » ou une formule du genre ne serait-elle pas mieux ?
    La moitié de la barrière qui empêche les gens de créer un site, c’est qu’ils pensent devoir savoir coder, et ça fait peur. En revanche, ils savent ce qu’ils veulent écrire, donc c’est beaucoup plus accessible

    • J’ai remplacé par « Get started already » :)
    • Je suis l’OP. Ah, bonne suggestion. C’est difficile de retirer son identité de développeur web et de regarder avec un œil neuf. Même en essayant consciemment de le faire

  • J’aime le fait que ça parte d’un petit fichier HTML, sans demander immédiatement d’installer NodeJS, VS Code et tout le fatras du développement web

    • C’est une leçon que beaucoup de professionnels doivent réapprendre. Il n’est pas réellement nécessaire d’avoir des centaines de Mo de JavaScript pour afficher du texte et des images de base
      L’accessibilité et la dégradation élégante sont trop souvent ignorées

  • J’aime l’ordre du tutoriel, qui fait commencer par un déploiement très simple
    On crée un index.html en texte brut avec Notepad/TextEdit, on le déploie quelque part comme Neocities, puis on ajoute du contenu avec un titre et une image
    Ce n’est qu’ensuite qu’on ajoute head, body, etc. pour en faire du vrai HTML, puis qu’on passe de Notepad/TextEdit à Visual Studio Code

    • Tu le sais sans doute déjà, mais en HTML5, html, head et body sont facultatifs ; même sans eux, c’est un document valide

  • Excellente tentative, et très bien exécutée. Je vais la mettre en favori pour la partager avec d’autres
    Récemment, j’ai décidé d’ajouter du contenu à mon site web uniquement avec du HTML écrit à la main, et de déplacer aussi progressivement mes anciens billets. J’aime le côté direct du HTML, la facilité des petits changements ponctuels page par page, et sa robustesse
    Après avoir essayé presque tous les systèmes permettant de publier sur le web, j’en suis arrivé à la conclusion que, même s’il demande un peu plus de travail au départ, HTML est l’outil adapté à cet usage
    En tant que développeur à la retraite, quand l’envie me prend, je bricole avec Rust, SQL, de l’embarqué ou ce genre de choses, mais quand je veux écrire, je veux simplement écrire. HTML rend cela possible dans une certaine mesure
    Si davantage de gens voyaient HTML comme un document à rédiger plutôt que comme une simple cible de build, les systèmes seraient beaucoup plus simples. La mentalité actuelle a fortement ralenti l’utilisateur moyen de l’ordinateur/du web, et a aussi créé de gros casse-tête pour les développeurs
    Je ne sais pas à qui profite, dans 99 % des cas, la complexité que nous avons introduite dans le monde. Cette ressource pourrait être l’un des déclencheurs qui nous ramènent dans la bonne direction