Apprendre à programmer un site Web en HTML/CSS/JavaScript
Je vous présente une nouvelle série qui vous expliquera, étape par étape, comment développer votre site Internet en utilisant les technologies HTML, CSS et JavaScript :
L'ensemble des vidéos sont listées ici.
Si vous ne pouvez pas regarder la vidéo, un compte rendu est proposé plus bas.
Résumé de la vidéo
Le site que nous allons réaliser est une sorte de blog, qu'on appelle CMS1dans le jargon, comme celui que vous lisez actuellement, ou comme ce que propose le très populaire WordPress.
Ce site contiendra des articles (ou posts) contenant des images, des vidéos, et du texte de différentes formes. On recensera aussi tous ces articles dans une page (timeline).
Notre objectif est de réaliser un site qui fonctionne le mieux possible sur tous les appareils (ordinateur, tablette, et téléphone) et qui soit le mieux référencé2 dans les moteurs de recherche. Ce site nous servira aussi de prétexte pour voir comment certaines technologies du Web fonctionnent comme les flux RSS.
Cette série peut vous être utile si vous souhaitez réaliser votre propre site, ou simplement comprendre le fonctionnement des sites Internet.
Choix des technologies
Les technologies et méthodes choisies dans ce projet n'ont pas la prétention d'être les meilleures, les plus adaptées, ni les plus simples. Elles permettront cependant de vous apprendre certaines des technologies du Web pour vous permettre d'avoir ensuite une meilleure réflexion et de choisir les outils et les services les plus adaptés à votre projet.
Il existe, en effet, des sociétés qui proposent de réaliser des sites Internet, gratuits ou payants, en quelques clics comme Wix.com ou les PagesJaunes. L'objectif est que vous puissiez améliorer vos compétences pour pouvoir juger par vous-même si ces services, ou les autres outils, sont adaptés à vos besoins.
Périmètre
Comme tous les projets Web, on va réaliser une partie front-end et une partie back-end :
- La partie front-end correspond à ce qui est envoyé au client, c'est-à-dire du code HTML, du CSS, du JavaScript.
- La partie back-end correspond à ce qui est réalisé par le serveur.
On va aussi beaucoup parler de référencement car l'un des objectifs majeurs d'un site Internet est de pouvoir être trouvé facilement par les internautes, notamment sur les moteurs de recherche.
Résultat attendu
L'objectif est de réaliser un site similaire à eWatchers.org, c'est-à-dire un site avec une bannière d'en-tête, un message d'introduction, un certain nombre de posts, et un pied de page.
On va aussi voir comment réaliser des articles avec un titre, un sous-titre, une bannière et un contenu, et adapter le tout pour qu'il soit le plus optimisé pour les réseaux sociaux et le mieux référencé sur les moteurs de recherche.
Note: Le prochain épisode est disponible ici