Réaliser un site web aujourd’hui compte de nombreux enjeux. Cet article se découpe en plusieurs parties. L’idée derrière ce post est de traverser les années (plus ou moins) et de voir ce qui se fait, pour progresser doucement. Nous utiliserons bien sûr que des technologies actuelles.
Tout d’abord, le web, c’était des pages statiques, fixées, qui ne bougent pas. On a ensuite rajouté des couleurs. Ce sera notre première étape.
Ensuite, on a voulu rendre les pages dynamiques, pouvoir les modifier en fonction du visiteur. Deuxième étape.
Après ça, on a commencé à imaginer des sites web dynamiques, qui pourraient intéragir avec l’utilisateur et le serveur sans recharger la page, nous arrivons à notre troisième étape.
Nous rentrons maintenant dans l’ère industrielle, avec les différents outils pour gérer votre projet web.
Enfin, nous terminerons avec les technologies web de demain, qui permettent de réaliser de vrais applications et plus encore.
HTML & CSS
Le HTML est un langage de balisage. Il permet de décrire à l’aide d’un fichier texte les types d’informations qui seront contenues dans votre document html - à fortiori sur votre site web. Un fichier HTML ne se préocuppe pas du rendu, des couleurs. Pour ce qui est de l’apparence, du cosmétique, on utilise le CSS. Le CSS applique des modifications sur des balises du HTML.
Pour tester votre page en HTML ou CSS, il vous faut juste un bloc note et un navigateur
Un petit exemple : Nous déclarons que ce bloc de texte est un paragraphe grâce au HTML. Nous pouvons changer la couleur de ce dernier grâce au CSS.
Où apprendre le HTML et CSS ? :
Pour rendre accessible mes pages HTML et CSS à tout le monde, je dois utiliser un serveur web. Ce sont actuellement des contenus statiques. Apache et nginx excellent dans ce domaine. Si vous utilisez Windows, vous pouvez installer WAMP (Windows Apache MySQL PHP) ou XAMP (X Apache MySQL PHP). Sous linux, installez nginx ou apache
Soyez dynamique !
La version old-school avec PHP
L’idéal serait de pouvoir générer nos pages web à la volée. La manière la plus simple serait de le faire avec PHP. Nous ne nous atterderons pas sur cette possibilité qui est dépréciée. Sachez juste qu’une page PHP en 2000 pouvait ressembler à ça :
<!doctype html>
<html>
<head>
<title>Mon titre</title>
</head>
<body>
<h1>Nous sommes le <?php echo date("d-m-Y"); ?></h1>
</body>
</html>
De nouveaux langages, une nouvelle approche
Bien que PHP reste majoritaire dans beaucoup de cas, de nouvelles approches pour développer votre application web.
Entre autre, de plus en plus de sites sont développés grâce à Python, Javascript, Ruby, Java, etc. Leur approche est différente. Dans ce cas là, on va écrire un programme dans ce langage, qui va utiliser une bibliothèque http. Pour lancer notre site web, il ne nous restera qu’à lancer notre programme.
Arrêtons de réinventer la roue !
Il existe de nombreux frameworks, qui posent les bases d’une application. C’est comme si des personnes avaient déjà écrit le squelette de votre application, vous n’avez plus qu’à implémenter ce que vous voulez. Voici une liste non exhaustive avec leur langage associé :
- Symfony, gros framework, une référence sur PHP Documentation
- Zend, idem que Symfony, PHP Documentation
- Silex, Framework dérivé de Symfony, léger, PHP Documentation
- Express, Framework léger pour NodeJS Documentation
- SailsJS, Gros framework NodeJS Documentation
- Rails, framework Ruby Documenation
- Django, framework Python Documentation
- Play, framework Java Documentation
Tout ces liens mènent vers la page de démarrage du projet, n’hésitez pas à naviguer sur les sites pour avoir des infos sur le framework
Design Pattern MVC
Tout ces frameworks partagent un point commun : leur façon de fonctionner. Elle est appelée MVC ou Modèle Vue Controlleur.
Pour faire simple, un utilisateur fait une requete sur votre application en cliquant sur un lien, ce qui appelle un Controlleur. Ce Controlleur va chercher les informations dont il a besoin dans les Modèles. Une fois les informations en sa possession, il les injecte dans la Vue, puis la renvoit à l’utilisateur.
Chaque controlleur sera donc associé à une url de notre application. Par exemple BlogController() fera référence à http://quentin.dufour.tk/blog, AboutController() fera référence à http://quentin.dufour.tk/about…
Un modèle représente une entité de notre application. On aura donc un objet User, un objet Article, un objet Page…
La vue est le code HTML de base dans lequel on va injecter le code de notre article. Une vue de ce blog pourrait ressembler à ça :
<article>
<h1>{[ article.title ]}</h1>
<p>{[ article.content ]}</p>
<em>{[ article.author ]}</em>
</article>
Javascript
A chaque fois que votre utilisateur fait une action, vous devez recharger la page web. Vous pouvez mettre fin à ça facilement grâce au javascript !
Il y a quelques années, la révolution jQuery est arrivée et a rendu le javascript simple. Les sites actuels sont d’une tel complexité que jQuery semble désuet. jQuery est une bibliothèque, et permet de réaliser certaines actions plus facilement. Il ne vous impose pas de cadre. Il vous permet de facilement modifier le DOM, le code html de votre page web à la volée. Pour en savoir plus, je vous renvois à la documentation ou le cours d’OpenClassRooms.
Aujourd’hui, utilisez jQuery pour construire une application web de 0 semble suicidaire. Il est préférable d’utiliser un framework, qui définit clairement un cadre, avec un endroit précis pour vos fonctions. Les deux plus connues sont Backbone et Angular.
Angular utiliser par exemple un modèle MVC, semblable à celui de votre serveur mais pour votre client.
Voilà, nous venons de faire un tour très rapide de l’évolution du web, et donc de ses technologies. Il en existe bien plus, à vous de les découvrir !