Le navigateur

Votre premier outil pour comprendre et apprendre le HTML est le navigateur, la liste est très longue (fr.wikipedia.org/wiki/Liste_de_navigateurs_web) et chaque nom se décline souvent en différentes versions. Par statistique, on peut résumer cet inventaire à cinq noms : Chrome, Firefox, Safari, Internet Explorer Edge et Opera. Chaque navigateur a ses spécificités, ses performances et ses fonctions. Un code basique sans erreur et sans expérimentation sera compatible avec la plupart des navigateurs, ce qui vous permettra de réduire les adaptations pour d’autres navigateurs. Dans la pratique, on utilise avec parcimonie les fonctions trop récentes, on veille à leur compatibilité et l’on teste sur plusieurs plateformes.

Super Resize Me
Super Resize Me proposait de jouer sur le redimensionnement du navigateur.

La fenêtre du navigateur est un élément important, en redimensionnant celle-ci vous pouvez tester le comportement d’une page web, de même qu’en utilisant cmd/ctrl + et cmd/ctrl - pour zoomer, vous avez la possibilité de mieux étudier la structure, d’observer la gestion du texte.
Chaque site est un exemple (bon ou mauvais ) des possibilités de votre navigateur. Une bonne analyse critique consiste à comprendre ce qui vous amène à naviguer avec aisance, enthousiasme ou désagrément. Vous pouvez aussi remarquer les pratiques fréquentes, les modes, les standards et les conventions d’ergonomie pour les adopter ou les exclure de vos créations.

En vidéo, les statistiques navigateurs et systèmes d’exploitation



Code, source et inspecteur

La plupart des navigateurs vous permettent de lire le code HTML de la page que vous consultez (dans Chrome en passant par le menu Afficher et dans Firefox par le menu Outils). Selon le type de site à analyser, l’interactivité ou l’optimisation, la lisibilité du code sera variable, mais pour dire les choses autrement, il n’y a pas de secrets en HTML.
À partir de 2006, les navigateurs se sont dotés peu à peu d’outils plus appropriés à la lecture du code et capables d’inspecter les éléments d’une page web. Ils font partie du quotidien des développeurs web et évitent les allers-retours entre le code et le navigateur. Véritable couteau suisse, ces outils sont devenus indispensables pour comprendre le fonctionnement d’un site, tester des modifications, observer les erreurs , anticiper ou résoudre les problèmes. Il est nécessaire de comprendre leur fonctionnement dès vos premiers pas.
Je vous recommande de prendre quelques minutes pour maitriser les bases de l’inspection, le retour sur investissement est immédiat !

À retenir :
cmd + alt + i pour ouvrir l’inspecteur sous Firefox et Chrome

Safari

Safari demande une manipulation en plus pour accéder à l’inspecteur

cmd + ,  onglet Avancées et case en bas
Préférence cmd + ,   / onglet Avancées et cocher la case en bas

Extensions

Indispensable pour analyser la typographie d’un site en deux clics : l’extension pour Chrome what font.

Attention ! en passant par le site des extensions de Chrome et son moteur de recherche, vous risquez d’installer une fausse extension. Vérifier vos sources !

les éditeurs

Depuis l’invention du HTML, de nombreux outils sont apparus pour faciliter la création de sites web. Dans les années 2000, la mode était aux éditeurs WYSIWYG (what you see is what you get), citons Golive d’Adobe, Dreamweaver de Macromedia et FrontPage de Microsoft, ces logiciels semblaient faciles, mais à l’usage le moindre bug devenait mystérieux.
Les évolutions du langage et des méthodologies ont redonné leur importance à des outils d’une autre philosophie, les éditeurs de code. La liste varie selon les plateformes et les licences, chacun aura ses préférences. En 2015, la communauté des développeurs se repartit autour de Sublime Text, Atom, Coda, Brackets. En 2020, l’éditeur de Microsoft Visual Studio Code semble être le plus utilisé. Dépourvus de repères visuels, ils imposent plus de rigueurs dans le processus créatif. La plupart proposent une aide à l’écriture avec coloration de la syntaxe, numérotation des lignes, indentation du code, autocomplétion du langage et l’ajout de plugins (extensions ou modules).
L’appréhension du code est plus complexe que l’utilisation d’un logiciel de mise en page WYSIWYG, mais permet d’accéder plus facilement au partage des connaissances. Le code produit gagnera aussi au niveau de sa sémantique et de sa lisibilité.
À l’usage, la maitrise de l’éditeur passe au second plan, on ne cherche pas après des menus et des fonctions pour écrire la bonne syntaxe. Néanmoins on pourra améliorer sa productivité en parcourant le site de l’éditeur, son aide et en customisant son outil avec quelques extensions.

et le reste

Time Machine

C’est « offert » avec Mac OS, des alternatives existent sur PC. Clonez votre disque dur sur un disque chez vous et ne le transportez pas.

Alfred

Mac OS évolue, mais il manque parfois d’avance sur son époque. Alfred devient vite indispensable.

Dash

Avec Dash, retrouvez toutes les documentations sur votre disque dur, accessible rapidement avec Alfred et quelques mots-clés.

Moom

Mac OS n’est pas habile avec les fenêtres. Moom est là !

Alternativeto

Comment trouver un logiciel alternatif sans http://alternativeto.net !