Aller plus loin avec HTML

Alors là, bravo, et merci ! vous avez tout lu ? vraiment ? en tout cas, j'espère que vous n’avez pas cliqué sur cet épisode sans avoir terminé les précédents…

Bon disons que vous êtes sérieux et que vous avez bien suivi cette formation depuis son début, eh bien, on dirait qu’on touche à la fin non ? Non ? bon ok, vous arrivez à la fin de votre formation sur le site, mais clairement pas de votre formation HTML en général. Eh oui, vous allez devoir continuer à charbonner pour apprendre et progresser encore plus afin de ne pratiquement plus avoir besoin de support pour coder. Ce n’est pas chose facile, mais vous verrez que le HTML, ça s’apprend quand même assez bien.

Alors dans ce dernier épisode, j’ai décidé de vous parler de la suite, de comment vous allez devoir vous organiser pour progresser tout seul, aller chercher des ressources, et surtout, vers quoi vous devez vous diriger !

Apprendre par soi-même

Le plus important, c’est de continuer à se former, tout le temps. Vous devez être curieux si vous voulez vraiment progresser rapidement. Et pour vous aider, voici des astuces pour gagner du temps :

Je follow plus de 1000 personnes sur Twitter, et 95 % de ces gens sont des professionnels du web, beaucoup de développeurs, d’intégrateurs, d’agences web et de référenceurs. Contrairement à ce que beaucoup peuvent penser, Twitter est formidable pour lire du contenu unique en lien avec son métier. Les gens racontent tout simplement leurs découvertes, leur journée, comment ils ont réussi à corriger leurs bugs ! Imaginez être 1000 personnes à travailler, à faire des erreurs et à les corriger en une seule journée, forcément, vous verrez beaucoup plus de cas de figure différents, donc quand vous aurez ces problèmes à votre tour, vous saurez où trouver la réponse et comment fixer vos problèmes.

Voici une (très) courte liste des profils que je follow:

• Raphaël Goetter
• W3C France
• Chrome for developers

Pour continuer à apprendre, évidement, il y’a internet de manière générale, vous pourrez trouver du contenu sur Stack Overflow ou sur n’importe quel autre forum, mais attention, sur Stack Overflow, il y’a principalement des gens qui ont des problèmes, donc vérifiez toujours le code que vous récupérez. Et honnêtement, cela va peut-être vous paraître étrange, mais… il existe de super livres qui peuvent vous aider, avec que du contenu qualitatif, validé et surtout, des explications bien plus détaillées que dans cette formation (je ne veux pas non plus vous noyer hein). Voici quelques livres que j’ai lus et que je vous recommande :

• HTML5 pour les web designers - Eyrolles
• HTML5 - Une référence pour le développeur - Eyrolles
• API HTML5 - Maitrisez le web moderne - Eyrolles
• Mémento HTML5 - Eyrolles

Si vous lisez tout ça, vous n’aurez plus aucun souci, croyez-moi ! Alors oui, je sais, je n’ai cité que des livres des éditions Eyrolles, mais non, je n’ai aucun liens avec eux, outre le fait que j’adore la manière dont leurs ouvrages sont rédigés.

Évidemment, et je trouve ça important, il existe beaucoup d’autres formations de ce type en ligne, vous trouverez du contenu de qualité sur YouTube ou directement sur les sites des formateurs. Je vous invite à suivre Grafikart qui produit du contenu exceptionnel depuis des années, il a formé à lui tout seul des promotions complètes de développeurs.

Et pour terminer, je vous invite également à aller régulièrement sur des sites d’actualité / blog spécialisé comme AlsaCréation, sans oublier, la documentation MDN qui est une véritable mine d’or !

Écrire des emails en HTML

Il y’a un sujet, que j’ai évité jusque-là. Mais il va quand même falloir qu’on le voie, je parle bien entendu des emails. Alors pourquoi ne pas avoir abordé ce sujet plus tôt ? Tout simplement car encore aujourd’hui, une grande majorité des clients mails ne prennent pas en compte une partie des balises HTML5 et du CSS3. Beaucoup d’emails sont encore envoyés avec une structure HTML 4 permettant d’afficher le mail correctement, peu importe la boîte mail du destinataire. Bien entendu, avec HTML 4, ces emails ne sont absolument pas adaptés à un affichage sur terminal mobile.

Il existe un site pour savoir si une balise HTML est supporté par un client mail, vous pouvez tester tout cela en vous rendant sur le site ‘Can I Email’ : https://www.caniemail.com/. Heureusement, aujourd’hui, il existe un langage plus simple à manier, qui permet de rédiger votre email, puis le convertit dans une version HTML adéquat à l’envoi d’email. Ce langage s’appelle MJML : https://mjml.io/.

Avec cette technique, vous pouvez simplement rédiger vos emails en MJML correctement, ils seront alors ensuite convertis en HTML afin d’être pris en charge par tous les clients mails supportés.

Les APIs HTML5

Lorsque l’on souhaite aller plus loin, on peut commencer à mélanger des langages de programmation différents pour arriver à des résultats époustouflants. C’est ce que proposent les APIs HTML5 lorsque vous les manipulez avec le langage JavaScript.

Je sais très bien que vous ne connaissez probablement pas ce langage et c’est pour ça que ce chapitre se trouve ici, en fin de formation, nous allons juste voir les concepts des différentes APIs, mais pas comment s’en servir en profondeur. Ces sujets seraient à aborder dans une formation JavaScript, plus complète. Voici tout de même un résumé, utile à votre culture web.

L’API File

HTML dispose d’une fonctionnalité de gestion de fichiers entre un site web et votre disque dur. Le moyen le plus simple pour accéder à cette fonctionnalité est de créer un champ de type ‘file’ dans un formulaire. Lorsque vous cliquez sur le bouton ‘parcourir’ du champ, une fenêtre de votre explorateur s’ouvre afin de vous permettre de choisir le bon fichier à uploader. Une fois le fichier chargé par le navigateur, il est possible d’interagir avec ce dernier, de le renommer, de le déplacer, de l'envoyer vers votre serveur ou d’en connaitre le format et la taille. C’est l’ensemble de ces petites fonctionnalités (et bien d’autres) qui constituent l’API File, très utile aux sites web modernes que vous connaissez tous.

L’API Drag and Drop

Cette interface de programmation permet aux utilisateurs de bouger et de manipuler des éléments au sein d’une page. Pensez aux interfaces comme celle Trello qui exploitent cette API afin de dynamiser l'expérience utilisateur. Voici un exemple d’api Drag and Drop :

L’API de géolocalisation

Vos navigateurs web sont dotés d’une fonctionnalité de géolocalisation. Cet outil permet lorsque l’utilisateur l’accepte de connaître l’emplacement de ce dernier. Vous avez probablement déjà vu ce popup en haut à droite de votre navigateur vous demandant d’accepter le fait que le site que vous visitez soit en mesure de vous localiser ? L’API de géolocalisation, c'est simplement cela. Elle permet d’avoir une meilleure expérience utilisateurs sur les sites de livraison par exemple en vous pré-plaçant sur une carte, ou à Google Map de vous proposer un itinéraire.

L’API Canvas

Savez-vous qu’il est possible de dessiner en HTML ? Vous pouvez définir une zone à l’aide de la balise <canvas> qui servira de bac à sable pour réaliser beaucoup de chose. L’API Canvas sert par exemple à optimiser les graphiques dans le cadre de la data visualisation, ou de faire des affichages dynamique et interactif. L’usage de la balise <canvas> est presque infini. De plus en plus d’outils utilisent cette balise à des fins d’optimisations.

Les APIS de temps réel

Les dernières APIs dont je souhaitais parler sont les API WebSocket et Server Send Events qui permettent d’avoir du contenu en temps réel sur internet. Imaginez un chat en ligne ou vous devez rafraîchir votre page toutes les 5 secondes pour savoir si votre ami vous a répondu, ce serait infernal ! Pour cela, il existe ces deux APIs, les deux ont des mécanismes légèrement différents, mais permettent en partie de faire la même chose.

Le WebSocket permet de conserver une connexion permanente entre le serveur et votre navigateur, qui permet au serveur de notifier le navigateur en cas de changements. Tandis que le Server Sent Events est un mécanisme du serveur qui ne contacte le navigateur qu’en cas de nouveau contenu à afficher.

Il existe une multitude d’APIs HTML, je ne les citerais pas toutes ici, mais il est intéressant de savoir que ces solutions existent afin de mieux comprendre les rouages du web.

La suite

Voilà, je pense avoir dit tout ce qui est crucial pour vous permettre de vous lancer, après évidement, avec uniquement des bases en HTML, vous n’allez pas pouvoir créer un site en entier. La seconde étape de votre formation web est donc l’apprentissage du langage CSS. Vous avez appris à construire une page web en HTML, il est maintenant l’heure d’apprendre à le designer correctement afin de créer des sites web ergonomiques et esthétiques.

Si vous avez aimé cette formation, et si vous pensez qu’elle peut être utile à d’autres, n’hésitez pas à la partager ou à me faire un coucou sur Twitter ou LinkedIn !

Bon courage, et à bientôt !