Imaginez un pays sans lois, sans règles et sans normes.
C'est comme ça qu'était Internet jusqu'à il y a quelques décennies. Tout n'était qu'un écran noir avec des lettres blanches.
Avec les progrès de la technologie et la croissance mondiale de l'internet, ce qui n'était qu'un endroit pour stocker des textes et échanger des messages cryptés s'est transformé en un environnement de divertissement et de recherche de connaissances.
Les débuts des normes Web
Tim Berners Leele créateur de l'internet tel que nous le connaissons aujourd'hui, a lancé en 1994 le W3C (Consortium World Wide Web), dont l'objectif principal est de créer des normes de bonnes pratiques pour le développement de sites web au niveau mondial.
Cette initiative a été lancée pour que l'ensemble du Web soit conforme à une norme d'accessibilité, c'est-à-dire que tout le contenu soit disponible de manière claire et organisée sur l'immense Toile mondiale, ce qui le rend accessible à tous.
Avec la popularisation de l'accès à l'internet et la croissance des sociétés de matériel et de logiciels, offrant de plus en plus d'options différentes de gadgets. La nécessité de normaliser la façon dont les codes web sont écrits, l'utilisation des images, des vidéos, etc. est apparue.
Ainsi, grâce à cela, tous les innombrables appareils et logiciels dont nous disposons peuvent lire et interpréter ces codes de la même manière, garantissant à leurs utilisateurs la même expérience. Même en utilisant différents systèmes d'exploitation, navigateurs, PC ou téléphones portables.
Imaginez ce que ce serait de conduire une voiture dans un endroit sans code de la route défini, où chaque conducteur fait ce qu'il veut ? C'est plus ou moins ce que ressentaient les navigateurs lorsqu'ils essayaient de rendre des sites web différents. Générer des retards, augmenter les demandes aux serveurs, générer de la lenteur et plus de coûts de traitement. Et principalement, l'affichage de résultats hors normes, d'éléments de couleurs et de tailles différentes dans chaque navigateur, entre autres désagréments.
Imaginez maintenant que vous conduisez sur une autoroute balisée et respectant toutes les normes internationales de circulation. Tout serait plus facile, plus rapide et moins déroutant, non ?
Le langage standard utilisé pour écrire ce code est appelé HTML(HyperText Markup Language) qui, contrairement à ce que beaucoup de gens pensent, n'est pas un langage de programmation mais un langage de balisage . Le HTML n'est pas un langage dynamique et n'est pas capable, à lui seul, de générer du contenu dynamique.
Sua estrutura básica possui 3 principais blocos de base, que são:
<html></html>
<head></head>
<body></body>
HTML - Consiste à couvrir tout le code, tout le contenu de la page doit se trouver dans ce TAG.
HEAD - C'est là que nous insérons les informations principales de la page, comme le titre, les balises méta et les liens externes Javascript et CSS.
BODY - C'est là que nous insérons le contenu du site, comme les menus, les textes, les vidéos, les images, etc.
Actuellement, nous suivons la norme HTML5qui a été créée après Web 2.0 où la structure HTML a suivi le xHTML.
L'objectif de toute cette écriture et de ce codage standard est de réduire la taille des codes, d'accélérer la lecture du code par les navigateurs et les moteurs de recherche et de rendre le contenu accessible à tous de manière claire et cohérente. Ainsi, les moteurs de recherche utilisent ces bonnes pratiques rédactionnelles comme un point crucial dans le classement et la pertinence de ce contenu par le biais de techniques d'analyse SEO(Search Engine Optimization).
Si le HTML n'est qu'un langage de balisage, comment créer le design et les interactions ?
Não devemos escrever códigos desnecessários na página, por isso utilizamos toda a formatação do layout e das cores através de um arquivo de CSS (Cascading Style Sheets) externo, chamado dentro do <HEAD></HEAD> da página.
E toda a interação dinâmica fazemos através de Javascript, seja por Framework ou não. Também chamamos seu arquivo .JS dentro do <HEAD></HEAD> da página através das TAGs <STYLE></STYLE>.
Cela signifie, nécessairement, qu'une page sans fichier CSS est juste un fichier sans mise en forme, avec un fond blanc, du texte et des images presque toujours mal alignés.
HTML et bonnes pratiques
Nos principales bonnes pratiques en matière de normes Web consistent à définir la structure de base du site de manière lisible et accessible, à s'assurer que l'ensemble du contenu sera interprété par tous les navigateurs (indépendamment de leur version, du système d'exploitation exécuté et, surtout, de l'utilisateur final).
Apprenez quelques-uns des termes les plus importants qui vont de pair avec toutes les meilleures pratiques du web :
- Réactivité - Veiller à ce que le site réponde automatiquement au redimensionnement du navigateur. Cela signifie que tous les éléments du code ont les spécifications correctes pour répondre aux changements de hauteur et de largeur du navigateur, en réorganisant votre contenu pour qu'il reste aligné, lisible et organisé.
- Acessibilidade – O termo é o mesmo utilizado para garantir que pessoas portadoras de necessidades especiais como deficiência visual ou auditiva possam acessar normalmente o conteúdo do site. Algumas dicas de como aperfeiçoar a acessibilidade do seu é inserir um texto descritivo em todas as imagens do site através do atributo ALT dentro da TAG <img>.
La ligne de code ci-dessus reçoit dans l'attribut ALT la description de l'image qui peut être lue par un navigateur spécifique utilisé par les personnes malvoyantes.
Uma outra tag importante para tornar seu site acessível é através da tag <label>.
Por exemplo:
<label for=”nome”>
Nome: <input type=”text” id=”nome” name=”nome” />
</label>
Où l'on crée une étiquette virtuelle pour le champ de saisie de texte d'un formulaire.
- Crossbrowser - Similaire au terme"responsive", qui signifie que le site s'affiche sur n'importe quel navigateur ou appareil par lequel le site a été consulté.
- Mobile first - Mobile first est la technique utilisée par la plupart des concepteurs où la structure principale du site est développée à partir de sa plus petite version, c'est-à-dire sa version mobile. S'assurer que le site ne présente pas d'incohérences dans la mise en page dans sa forme d'affichage la plus restreinte, étant donné que 53 % du trafic internet mondial est généré par les téléphones mobiles, tandis que l'accès via des ordinateurs normaux est tombé à 44 % d'ici 2020.
- Web sémantique - C'est le souci d'une bonne sémantique dans l'écriture du code afin que sa communication avec les navigateurs et les serveurs se fasse de la manière la plus optimisée possible.
HTML
- Estrutura básica:
<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>Título principal</h1>
<p>Parágrafo</p>
</body>
</html>
- Estrutura básica de conteúdos:
O menu deve ser criado utilizando listas
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Sobre</a></li>
<li><a href=”#”>O que fazemos?</a></li>
<li><a href=”#”>Links</a></li>
<li><a href=”#”>Contato</a></li>
</ul>
O título de maior relevância deve ser criado utilizando tags <h1><h1>Título de maior relevância</h1>
O parágrafo simples deve ser criado utilizando tags <p>
<p>Parágrafo simples</p>
O título de menor relevância ou subtítulo simples deve ser criado utilizando tags <h2>
<h2>Título de menor relevância ou subtítulo</h2>
Que pouvons-nous conclure ?
Les moteurs de recherche analysent chaque caractère de votre code par le biais d'algorithmes de référencement et valorisent chaque TAG utilisé correctement et sémantiquement, augmentant ainsi sa pertinence sur le web en général. En d'autres termes, plus votre code est écrit correctement et en détail, plus il sera pertinent sur le Web.
En rendant votre site web plus léger, plus facile à lire et plus accessible à tous, il sera d'autant plus pertinent. Il est également indispensable de veiller à ce que les personnes ayant des besoins particuliers puissent accéder clairement à votre contenu. Le simple fait d'écrire du code sémantique dans le cadre des normes Web permet d'atteindre cet objectif sans dépenser des ressources extraordinaires.