Aller plus loin avec HTML
- Episode N° 14
- Difficulté facile
- Publié le 09/05/2020 par Ronan HELLO
- Dernière mise à jour le 03/08/2020
Alors la 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 leur 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:
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 lu et que je vous recommande :
- HTML5 pour les webdesigners - 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é 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 époustouflant. 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é (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. Cette outil permet lorsque l’utilisateur l’accepte, de connaître l’emplacement de ce dernier. Vous avez probablement déjà vu cette 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 graphique dans le cadre de la datavisualisation, ou de faire des affichage dynamique et interactif. L’usage de la balise <canvas> est presque infini. De plus en plus d’outils utilisent cette balise à des fin 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étique.
A l’heure où vous lisez ces lignes, je suis en train de rédiger la suite de cette formation sur le CSS. Elle devrait être publiée au printemps 2020 si tout se passe comme prévu. Si vous ne souhaitez pas attendre, je vous invite bien entendu à trouver des ressources complémentaires afin de continuer votre apprentissage. En tout cas une chose est sûre, la suite, ça se passe au niveau du CSS !
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 !
Vous devez être connecté pour pouvoir commenter. Se connecter
Merci pour les différents liens et les cours. Je vais acheter un des livres présentés je crois :)
Grafikart est un excellent youtubeur et je rajouterai pierre giraud qui propose une formation très complète bien que celle-ci commence un peu à dater (2015).
une autre formation accès dev-web est-elle prévue ?
Merci à vous pour votre retour, et en effet, Pierre Giraud et bien d'autres Youtubeur sont d'excellentes ressources pour progresser.
Pour répondre à ta question, oui d'autres formations plutôt orientées développement sont prévues, et en cours d'écriture. Une formation CSS sera bientôt publiée pour faire suite à celle-ci.