Composants d'un site Web. De WordPress à Jekyll 2

Dans le article précédent J'ai commencé à expliquer les différences entre trois types d'outils pour créer un blog et pourquoi ces différences m'ont poussé à abandonner l'option que j'utilisais; WordPress, en faveur d'un constructeur de site statique comme Jekyll.

Pour que les avantages et inconvénients de chacun soient mieux compris Nous devons définir certains termes et les illustrer avec un exemple, un blog hypothétique sur le jardinage.

Composants d'un site Web

Les trois ingrédients fondamentaux d'un site Web sont:

• HTML: fournit la structure de base du site
• CSS: gère la représentation du contenu.
• Javascript: gère l'interactivité des différentes parties du site.

HTML

HTML signifie HyperText Markup Language: il est appelé "Markup Language" car utilise des balises pour identifier les différents types de contenu et les objectifs que chacun d'eux a pour le Web. Vous pouvez déjà passer pour un expert qui regarde avec mépris ceux qui disent que c'est un langage de programmation.

Par exemple, la spécification actuelle, HTML5 utilise les balises suivantes

• head pour indiquer qu'il y a des informations techniques sur le document dans cet espace.
• body pour encadrer le contenu à afficher sur la page.
• article pour le contenu principal
• de côté pour le contenu secondaire
• pied de page pour le contenu du bas de la page.

Dans notre prétendu blog de jardinage, nous aurions quelque chose comme ça.

Je le mets en image parce que les politiques de sécurité de Linux Adictos Ils ne permettent pas d'inclure du code HTML.

Si vous copiez ce texte dans l'éditeur de texte et l'enregistrez sous index.html, vous verrez le texte Ceci est mon blog de jardinage.

La première ligne du code indique au navigateur que ce qui suit doit être interprété comme du HTML, la deuxième ligne indique que les balises commencent ici et que la langue du site est l'espagnol argentin. À l'intérieur de la tête, le jeu de caractères et le titre du blog sont indiqués.

Dans la section corps on voit que la phrase est enfermée dans une autre étiquette,

Cela indique au navigateur qu'il doit le traiter comme un paragraphe.

En plus du codage de caractères, le paramètre meta permet d'incorporer d'autres types d'informations qui, bien que non visibles dans le navigateur, sont utiles pour les moteurs de recherche.

Par exemple, le paramètre de contenu de l'auteur du méta-nom identifie l'auteur d'une page, tandis que le paramètre de contenu de la description du méta-nom résume le contenu de la page pour les moteurs de recherche.

Il y a deux autres éléments qui entrent dans head, qui sont les liens vers les feuilles de style et le code Javascript

CSS

Si vous vous souvenez de notre exemple de page Web, seule la phrase était affichée "Ceci est mon blog de jardinage." Bien sûr, un site Web doit être plus attrayant qu'une feuille de style n'est nécessaire.

Les feuilles de style sont ceux qui établissent comment les différents éléments de la page seront affichés.

Par exemple, si nous voulons que notre texte soit affiché avec un fond noir et des lettres jaunes, nous créons un fichier appelé my-style-css.ss et écrivons ces lignes

p {
background-color: black;
Couleur jaune;
}

Nous changeons le code de la page d'exemple en:

N'oubliez pas que pour que cela fonctionne, les deux fichiers doivent se trouver dans le même dossier.

javascript

Bien qu'aujourd'hui, HTML5 et CSS peuvent donner beaucoup d'animation à un site. Au cas où nous aurions besoin d'une interactivité plus complexe, nous devons recourir à Javascript.

javascript est un langage de programmation qui permet de modifier le contenu d'un site Web en fonction du comportement de l'utilisateur.

Sur un site Web qui restera statique, l'effort de création de pages à partir de zéro peut être compensé par une faible consommation de ressources et une faible capacité de personnalisation. Cependant, un blog est un type particulier de site Web qui nécessite une attention constante. Et la clé est la quantité et la variété du contenu. Par conséquent, tout ce qui peut être automatisé doit l'être. Il est vrai que les informations communes à toutes les pages peuvent être copiées et collées. Mais croyez-moi, des erreurs sont commises et difficiles à trouver.

Notez la quantité de code nécessaire pour afficher une seule ligne et changer sa couleur. Un article de blog moyen comporte 300 mots, quelques légendes et des images. Et vous devez essayer de rendre tout cela beau sur différents formats d'écran.

Dans les prochains articles nous verrons comment gérer cette complexité avec WordPress, Jekyll et le cadre Bootstrap