Développement web : la technique des sites internets

Aujourd’hui avoir un site internet est crucial pour les entreprises: elles en ont besoin pour attirer les clients, pour se crédibiliser et améliorer le image de marque. Néanmoins, il y a aujourd’hui une barrière à l’entrée significative. S’il est facile d’avoir un site internet, grâce aux systèmes comme WordPress ou Wix, il est plus dur d’en avoir un bon.

Surtout, dès qu’on commence à ajouter de la complexité, la facture s’affole, avec des prix de souvent plusieurs dizaines de milliers d’euros. Or, il est très difficile de vraiment savoir ce qu’il nous faut et ce qui est optimal en termes de rapport qualité/prix quand on ne connait rien au développement.

Ce dossier a pour objet de vous donner une vision d’ensemble de cette matière et de permettre à tous les entrepreneurs d’avoir une meilleure compréhension du sujet.

Nous verrons les langages de programmation et quelques fonctionnalités récurrentes dans les sites internet. Mais avant, rappelons l’intérêt d’apprendre le développement web.

Pourquoi apprendre le développement web

Je pense que beaucoup de monde devrait apprendre le développement web: c’est important pour entreprendre et une carrière très intéressante.

L’importance pour les entrepreneurs

Pour un entrepreneur, pouvoir comprendre les grandes lignes du développement peut économiser énormément d’argent, soit parce qu’on peut le faire soi-même (un site « basique » n’est vraiment pas compliqué à faire), soit parce qu’on saura mieux encadrer la personne qui devra s’en charger.

Une carrière très intéressante

En terme de carrière, connaître le développement web est une porte d’entrée vers une myriade de professions. Vous pouvez, par exemple, vous orienter vers l’intégration (traduire une maquette en code), vers la maîtrise d’un CMS, comme WordPress, ou bien aller vers les frameworks javascript comme React ou Angular. Vous pouvez également vous orienter, ensuite, plutôt vers le frontend, vers le backend ou l’ensemble (« full-stack« ). Vous pouvez même vous diriger vers la conception de logiciels ou encore la cybersécurité.

Il y a, en outre beaucoup de formations disponibles en ligne, gratuitement ou non. Pour ma part, j’ai suivi la formation OpenClassRooms, que je recommande. Pensez à l’apprentissage et aux stages: vous découvrirez des choses importantes sur le métier de développeur, comme le vocabulaire et les processus.

Comment apprendre à développer

Pour apprendre à développer, c’est très simple: il faut faire. J’ai justement conçu ce site pour vous présenter les savoirs (les différents langages, les grandes notions, etc.) en les rattachant toujours à des applications concrètes (utiles).

Je vous proposerai notamment plusieurs tutoriels très simples, correspondant à de vrais projets que j’ai menés. Je vous mettrai également des liens vers des cours en ligne que j’ai trouvés intéressants.

Les langages du web

PHP, Javascript, MySQL … C’est très difficile quand on aborde le développement de comprendre toutes les particularités des langages de programmation. Je vous les présenterai, en insistant sur les principaux :

  • Le HTML et CSS, qui sont les briques de bases du web : c’est ce qui permet à votre navigateur de savoir quoi afficher. Le HTML va définir la structure de vos pages et le CSS la mise en forme. [rq: ce ne sont pas vraiment des langages « de programmation »],
  • Javascript et PHP vont venir générer du code HTML et/ou CSS. Par exemple, au lieu créer 200 fichier html et tout recopier chaque fois, vous pourrez tout modifier d’un coup et même les générer automatiquement à partir d’une base de données (ce que fait WordPress). Les sites codés en Python sont plus rares, mais restent communs, avec le framework Flask ou le CMS Django.
  • MySQL et MongoDB sont des bases de données et leur langage permet d’interagir avec: classer, trier, créer des items, en supprimer, etc.

Cet aperçu, déjà très fourni, concerne les sites internet directement. Néanmoins, il y a beaucoup de tâches autour du site internet: scraper un site, automatiser des tâches, etc. Pour celles-ci, on peut évidemment utiliser du PHP et du Javascript, mais c’est Python qui est en général le plus pratique.

Les grandes notions du développement web

Nous vous présenterons les grandes notions du développement web, comme la programmation orientée objet, les fonctions, les boucles … Tous ces éléments qui se retrouvent dans de nombreux langages.

Les fonctionnalités courantes dans les sites web

Il y a plusieurs fonctionnalités courantes dans les sites web. je vais vous en présenter quelques unes.

Le formulaire

Le formulaire permet à un utilisateur de vous contacter. C’est la fonctionnalité la plus répandue

L’enjeu de sécurité est important : il faut empêcher qu’un malotru mettre du SQL dans son formulaire, ce qui lui permettrait d’interagir directement avec votre base de donnée (si c’est son langage, ce qui est souvent le cas).

La boucle d’articles

Autre fonctionnalité quasi-systèmatique : la boucle d’articles. C’est ce que vous avez par exemple dans notre fonction blog.

La modale

La modale est une animation générée en javascript, qui consiste à faire apparaître une zone, en principe avec du texte.

Bonnes pratiques basiques de webdesign

Simple is beautiful

Plus il y a d’éléments, plus il faut d’attention pour s’y retrouver. Vos utilisateurs ont une attention très limitée, donc ménagez la : faites des design simples.

Couleurs

La couleur du texte doit radicalement se démarquer de son fond. Vous avez de nombreux outils gratuits en ligne pour vérifier que votre texte est assez contrasté.

Animation des objets cliquables

Lorsque vous survolez ou cliquez sur un lien, il doit manifester cette particularité avec une petite animation.

Formattage des liens et textes soulignés

Les liens sont des choses spéciales dans les sites, parce qu’ils permettent de guider la navigation. Ainsi, il ne faut que rien ne ressemble à un lien si ça n’en est pas un. Les liens étant souvent associé au soulignement, on évite de souligner autre chose.