Les 5 erreurs les plus courantes commises par les développeurs HTML5 : guide du débutant

Cela fait plus de 20 ans que Tim Berners-Lee et Robert Cailliau ont spécifié HTML, qui est devenu le langage de balisage standard utilisé pour construire Internet. Depuis lors, la communauté de développement HTML a imploré des améliorations à ce langage, mais ce cri a surtout été entendu par les développeurs de navigateurs Web qui ont essayé de résoudre les problèmes HTML de leurs collègues. Malheureusement, cela a entraîné encore plus de problèmes, entraînant de nombreux problèmes de compatibilité entre navigateurs et la duplication des travaux de développement. Au cours de ces 20 années, HTML a été mis à jour 4 fois, tandis que la plupart des navigateurs ont reçu un nombre à deux chiffres de mises à jour majeures ainsi que de nombreux petits correctifs.

HTML5 était censé résoudre enfin nos problèmes et devenir un standard pour les gouverner tous (navigateurs) . C'était probablement l'une des technologies les plus attendues depuis la création du World Wide Web. Est-ce arrivé? Avons-nous finalement obtenu un langage de balisage qui sera entièrement compatible avec tous les navigateurs et fonctionnera sur toutes les plates-formes de bureau et mobiles, nous offrant toutes les fonctionnalités que nous demandions ? Je ne sais pas! Il y a quelques jours à peine (le 16 septembre 2014), nous avons reçu un autre appel à révision par le W3C, de sorte que la spécification HTML5 est toujours incomplète.

Avec un peu de chance, lorsque la spécification sera un jour finalisée, les navigateurs n'auront pas déjà de code obsolète significatif, et ils implémenteront facilement et correctement d'excellentes fonctionnalités telles que Web Workers , Plusieurs éléments audio et vidéo synchronisés et d'autres composants HTML5 dont nous avons besoin pour un longue durée.

Nous avons cependant des milliers d'entreprises qui ont basé leurs activités sur HTML5 et qui s'en sortent très bien. Il existe également de nombreuses applications et jeux basés sur HTML5 utilisés par des millions de personnes, donc le succès est évidemment possible et HTML5 est, et continuera d'être, utilisé quel que soit le statut de sa spécification.

Cependant, la recette que j'ai mentionnée peut facilement nous exploser à la figure, et j'ai donc souligné certaines des erreurs HTML5 les plus élémentaires qui peuvent être évitées. La plupart des erreurs répertoriées ci-dessous sont la conséquence d'une implémentation incomplète ou manquante de certains éléments HTML5 dans différents navigateurs, et nous devrions espérer que dans un proche avenir, ils deviendront obsolètes. En attendant, je suggère de lire la liste et de l'avoir à l'esprit lors de la création de votre prochaine application HTML5, que vous soyez un débutant HTML5 ou un vétérinaire expérimenté.

Erreur courante n° 1 : Faire confiance au stockage local

Qu'ils mangent du gâteau! Cette approche a été un fardeau pour les développeurs pendant des siècles. En raison d'une peur raisonnablement raisonnable des failles de sécurité et de la protection des ordinateurs, à l'"âge sombre" où Internet était craint par beaucoup, les applications Web étaient autorisées à laisser des quantités déraisonnablement petites de données sur les ordinateurs. Certes, il y avait des choses comme les données utilisateur que les "grands maîtres du navigateur de Microsoft (r)" nous ont données, ou des choses comme les objets locaux partagés dans Flash, mais c'était loin d'être parfait.

Il est donc raisonnable que l'une des premières fonctionnalités HTML5 de base adoptées par les développeurs ait été le Web Storage. Cependant, sachez que Web Storage n'est pas sécurisé. C'est mieux que d'utiliser des cookies car il ne sera pas transmis sur le fil, mais il n'est pas crypté. Vous ne devriez certainement jamais y stocker de jetons de sécurité. Votre politique de sécurité ne doit jamais s'appuyer sur les données stockées dans Web Storage, car un utilisateur malveillant peut facilement modifier ses valeurs localStorage et sessionStorage à tout moment.

Pour en savoir plus sur le stockage Web et son utilisation, je vous suggère de lire cet article.

Erreur courante n° 2 : s'attendre à une compatibilité entre les navigateurs

HTML5 est bien plus qu'un simple langage de balisage. Il a suffisamment mûri pour combiner comportement et mise en page, et vous devriez considérer HTML5 comme HTML étendu avec JavaScript avancé en plus. Si vous regardez tous les problèmes que nous avions auparavant pour faire en sorte qu'une combinaison statique de HTML + CSS soit identique sur tous les navigateurs, il est juste de supposer que plus de complexité signifiera simplement plus d'efforts pour assurer la compatibilité entre navigateurs.

L'interprétation HTML5 sur différents navigateurs est loin d'être identique, tout comme c'était le cas avec JavaScript. Tous les principaux acteurs de la guerre des navigateurs ont contribué à la spécification HTML5, il est donc juste de supposer que les écarts entre les navigateurs devraient diminuer avec le temps. Mais même maintenant, certains navigateurs ont décidé d'ignorer complètement certains éléments HTML5, ce qui rend très difficile le suivi d'un ensemble de fonctionnalités de base et commun. Si nous ajoutons plus d'appareils et de plates-formes connectés à Internet à l'équation, la situation devient encore plus compliquée, causant des problèmes avec HTML5.

Par exemple, les animations Web sont une fonctionnalité intéressante qui n'est prise en charge que par Chrome et Opera, tandis que la fonctionnalité de notification Web qui permet d'alerter l'utilisateur en dehors du contexte d'une page Web d'un événement, tel que la livraison d'e-mails, est totalement ignorée par Internet Explorer.

Pour en savoir plus sur les fonctionnalités HTML5 et la prise en charge par différents navigateurs, consultez le guide HTML5 sur www.caniuse.com.

Il n'en reste pas moins que même si HTML5 est nouveau et bien spécifié, nous devons nous attendre à de nombreux problèmes de compatibilité entre navigateurs et les planifier à l'avance. Il y a tout simplement trop de lacunes que les navigateurs doivent combler, et il est juste de s'attendre à ce qu'ils ne puissent pas bien surmonter toutes les différences entre les plates-formes.

Erreur courante n° 3 : supposer des performances élevées

Indépendamment du fait que HTML5 continue d'évoluer, il s'agit d'une technologie très puissante qui présente de nombreux avantages par rapport aux plates-formes alternatives utilisées avant son existence. Mais, avec une grande puissance vient une grande responsabilité , en particulier pour les débutants en HTML5. HTML5 a été adopté par tous les principaux navigateurs sur les plates-formes de bureau et mobiles. Dans cet esprit, de nombreuses équipes de développement choisissent HTML5 comme plate-forme préférée, espérant que leurs applications fonctionneront de la même manière sur tous les navigateurs. Cependant, supposer des performances raisonnables sur les plates-formes de bureau et mobiles simplement parce que la spécification HTML5 le dit, n'est pas raisonnable. De nombreuses entreprises (khm ! Facebook khm !) ont misé sur HTML5 pour leur plate-forme mobile et ont souffert que HTML5 ne fonctionne pas comme prévu.

Encore une fois, cependant, certaines grandes entreprises s'appuient fortement sur HTML5. Il suffit de regarder les nombreux studios de développement de jeux en ligne qui font des choses incroyables tout en poussant HTML5 et les navigateurs à leurs limites. De toute évidence, tant que vous êtes conscient des problèmes de performances et que vous y travaillez, vous pouvez être dans un endroit idéal pour créer des applications étonnantes.

Erreur courante n° 4 : accessibilité limitée

Le Web est devenu une partie très importante de nos vies. Rendre les applications accessibles aux personnes qui dépendent de la technologie d'assistance est un sujet important qui est souvent mis de côté dans le développement de logiciels. HTML5 tente de surmonter cela en implémentant certaines des fonctionnalités d'accessibilité avancées. Plus de quelques développeurs ont accepté que cela soit suffisant et n'ont pas vraiment passé de temps à implémenter des options d'accessibilité supplémentaires dans leurs applications. Malheureusement, à ce stade, HTML5 a des problèmes qui l'empêchent de rendre vos applications accessibles à tous et vous devez vous attendre à investir du temps supplémentaire si vous souhaitez inclure un plus large éventail d'utilisateurs.

Vous pouvez consulter cet endroit pour plus d'informations sur l'accessibilité dans HTML5 et l'état actuel des fonctionnalités d'accessibilité les plus courantes.

Erreur courante n° 5 : ne pas utiliser les améliorations HTML5

HTML5 a considérablement étendu l'ensemble de balises HTML/XHTML standard. En plus des nouvelles balises, nous avons obtenu quelques nouvelles règles et comportements. Trop de développeurs n'ont choisi que quelques améliorations et ont ignoré certaines des nouvelles fonctionnalités très intéressantes de HTML5.

L'une des choses les plus intéressantes de HTML5 est la validation côté client. Cette fonctionnalité était probablement l'un des premiers éléments de HTML5 que les navigateurs Web ont repris. Mais, malheureusement, vous pouvez trouver plus que quelques développeurs qui ajoutent l'attribut novalidate à leurs formulaires par défaut. Les raisons de faire cela sont raisonnables, et je suis certain que nous aurons un débat à ce sujet. En raison de la rétrocompatibilité, de nombreuses applications ont implémenté des validateurs JavaScript personnalisés et avoir une validation prête à l'emploi effectuée par les navigateurs en plus de cela n'est pas pratique. Cependant, il n'est pas trop difficile de s'assurer que deux méthodes de validation ne se heurteront pas, et la normalisation de la validation des utilisateurs garantira une expérience commune tout en aidant à résoudre les problèmes d'accessibilité que j'ai mentionnés plus tôt.

Une autre fonctionnalité intéressante est liée à la manière dont la saisie de l'utilisateur est gérée dans HTML5. Avant l'arrivée de HTML5, nous devions conserver tous nos champs de formulaire contenus dans la <form></form> . Les nouveaux attributs de formulaire rendent parfaitement valide quelque chose comme ceci :

 <form action="demo_form.asp"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">

Même si lname n'est pas dans le formulaire, il sera posté avec fname .

Pour plus d'informations sur les nouveaux attributs de formulaire et les améliorations, vous pouvez consulter le réseau de développeurs Mozilla.

Emballer

Je comprends que les développeurs Web sont des dommages collatéraux dans les guerres de navigateurs, car bon nombre des erreurs ci-dessus sont une conséquence directe de la mise en œuvre problématique de HTML5 dans différents navigateurs. Cependant, il est toujours crucial d'éviter les problèmes courants liés à HTML5 et de passer un peu de temps à comprendre les nouvelles fonctionnalités de HTML5. Une fois que nous aurons tout sous contrôle, nos applications utiliseront de nouvelles améliorations et feront passer le Web au niveau supérieur.