Créez Votre Propre Site Web - Introduction

Dans ce cours, je compte vous apprendre à créer votre propre site web à partir de rien. Nous n'utiliserons pas de modèles modifiables comme ceux que vous pouvez trouver via des services tels que Wix et SquareSpace pour citer les plus connus. Les sites web créés avec de tels services finissent le plus souvent par restreindre vos idées de par les limitations apportées par le développement programmé. Faire des sites web avec ce genre de services rend la compréhension de ce qu'il se passe derrière votre site difficile, j'estime que c'est la moindre des choses de comprendre comment fonctionne votre propre création. Nous allons commencer par apprendre HTML5 et CSS3 pour créer notre première page web statique mais il va nous falloir plus que ça pour la rendre dynamique. Une fois l'essentiel de ces deux langages appris, nous allons nous pencher sur PHP et JavaScript qui sont des langages plus difficiles à apprendre mais loin d'être impossibles contrairement à ce que vous pourriez croire en voyant un bout de code sans en comprendre le contexte. J'aime comparer la programmation à une langue (après tout, on n'appelle pas ça un langage de programmation pour rien !). Quand vous essayez de lire un texte dans une langue étrangère sans la connaitre, vous n'y comprenez rien. Mais si vous apprenez cette langue puis vous penchez à nouveau sur le texte, vous en comprendrez la majorité.

Le strict nécessaire pour un site web sont les deux premiers langages que nous allons apprendre, mais ceux-ci ne nous permettraient pas de rendre notre site dynamique. De nos jours, la grande majorité des sites web que vous visitez sont dynamiques et ont donc besoin des deux autres langages. Si vous comptez faire un site dont les informations ne changent jamais, vous pourriez effectivement vous arrêter aux deux premiers langages mais ce serait dommage. Il est temps que je vous explique chacun de ces langages plus en détail pour que vous compreniez en quoi ils sont importants. Un exemple de post sur un site web sera repris tout le long du post pour bien illustrer mes propos.

Il est à présent temps de voir ce que HTML peut faire pour notre site web. Le post en question a pour but final de ressembler à un mélange entre ceux que vous pouvez trouver sur Twitter et Facebook. Un post sur notre faux site contient dans son en-tête le nom de l'auteur, sa photo de profil et le temps passé depuis la mise en ligne du post. Au milieu se trouve la partie que l'auteur a réellement écrite. Enfin, le bas du post est composé d'un tas de fonctionnalités (aimer, partager et commenter) ainsi que leurs compteurs de clics respectifs.

Comme vous vous en apercevez, ce n'est pas très sexy ! On pourrait à peine comprendre à quoi correspond tout ce charabia si personne ne nous l'avait dit auparavant. Personne de sensé ne voudrait utiliser un tel site web. Heureusement, le prochain langage est là pour rendre le tout plaisant pour l'utilisateur !

Il est temps que la magie opère ! Tout ce que vous verrez paraîtra instantanément plus beau, vous êtes prêt ? Allons-y (lancement du jingle de Pimp My Ride) !

Que s'est-il donc passé ? Beaucoup... et pourtant pas grand chose ! Aucune donnée écrite n'a été changée, nous avons juste modifié leur apparence, mais n'oubliez pas que c'est exactement à ça que sert CSS ! Ce que vous devriez remarquer dans un premier temps sont les trois couleurs utilisées : orange pour les fonctionnalités, jaune très pâle pour le fond du site et bleu foncé pour le texte. Un autre gros changement est la présence du bouton "envoyer" dans l'espace de commentaire, vous pouvez vérifier sur la première capture d'écran, il n'y était pas ! Les autres changements sont minimes : ajouter une ombre pour le post, justifier le texte (ce qui est d'ailleurs possible sur Steemit mais visiblement personne ne veut le faire), ajuster la largeur de l'espace commentaire et bien plus.

La stylisation est déjà terminée mais vous avez probablement remarqué que toutes les données étaient des données par défaut (0, lorem ipsum, utilisateur, photo de profil). C'est une pratique courante de remplir notre HTML avec des fausses données pour tester l'apparence d'un site web.

Maintenant que nous pouvons nous connecter à une base de données, le post ressemble plus à un réel post. Les informations de l'auteur sont disponibles ainsi que le temps passé depuis la mise en ligne du post et le nombre de commentaires. Nous pouvons aussi commenter ce post, le commentaire sera alors envoyé à la base de données. Cependant, cliquer sur le bouton "envoyer" rafraîchira la page étant donné que c'est la seule manière d'envoyer un commentaire. Nous aurions pu avoir un même système pour les partages et les "j'aime" mais, contrairement aux commentaires, je ne vois aucun site qui voudrait rafraîchir une page une fois ces boutons cliqués.

Il est temps de voir les quatre langages en action ! Le post est à présent complet. JavaScript nous a été utile dans ce cas pour faire appel à des scripts PHP via jQuery mais aussi pour rendre l'expérience utilisateur meilleure. Tout devient plus dynamique, pour illustrer ceci une simple image n'aurait pas fait l'affaire, c'est pourquoi je vous ai fait un gif.

Comme vous pouvez le remarquer, les "j'aime", les partages et les commentaires sont instantanément envoyés et ajoutés à leurs compteurs respectifs. Les fonctionnalités changeant de couleur lorsque la souris leur passe dessus est du pur CSS tout comme le bouton changeant de taille. Par contre, ces mêmes fonctionnalités gardant leur couleur orange une fois cliquées a été rendu possible par JavaScript.