INADEN - Services Web et PAO

Création de sites Web, charte et identité graphique
Tous travaux en PAO, restauration de photographie.

Formation professionnelle

Formation PAO : Photoshop®, InDesign®, Illustrator®
Formation cahier des charges d'un site Web

Enregistrer au format PDF Accueil > Formation professionnelle > Ateliers informatiques > Les 4 techniques de création d’un site Web

Du service en ligne à la ligne de code

Les 4 techniques de création d’un site Web

De l’absence totale de connaissance à la maîtrise des langages de programmation

Je vous présente ici des principes de création de site Web, non des techniques. Selon que vous avez un budget ou non et des connaissances techniques ou non, vous avez la possibilité de trouver un moyen pour créer votre site. Il existe quatre façons de créer un site Web. Toutes nécessitent de penser votre projet avant de vous lancer dans sa construction : c’est le cahier des charges. En ligne

Avant propos : la programmation

La création d’un site Web nécessite la manipulation de code. Le langage de base permettant l’affichage d’une page Web est le HTML, celui permettant l’habillage de cet affichage est le CSS. Enfin, pour la création de fonctionnalités, même si ces deux langages en permettent quelques unes, il est nécessaire d’utiliser des langages de programmation. On utilise deux types de langage :

  • Les langages côté serveur : dont les requêtes et calculs sont effectués par l’ordinateur qui héberge votre site.
  • Les langages côté client : dont les requêtes et calculs sont faits par l’ordinateur de l’internaute via le navigateur.

À quoi sert la programmation

Cette description est peut-être incomplète, mais globalement, un langage de programmation sert à :

  • Générer une donnée à partir d’un calcul établi avec d’autres données (p.ex. l’âge de la personne selon la date du jour et sa date de naissance) ;
  • Donner un ordre directement à un objet selon une situation (p. ex. l’arrivée du scroll en bas de page) ou selon une intervention externe (p. ex. le clic de l’internaute) ;
  • Vérifier quelque chose pour donner un ordre en fonction du résultat (p. ex. la présence dans une base de données et le type de droit d’un internaute qui s’identifie sur un site afin de lui accorder le droit à telle ou telle action) ;
  • Stocker, modifier, supprimer et chercher des données dans une base de données soit automatiquement, soit sur action de l’utilisateur.

La programmation permet la mise en place de réponses à des actions ou à des états selon différents schémas procéduraux et structurels, par l’établissement d’une succession d’étapes et/ou par l’appel et par l’interaction de « briques logicielles » définies dans le langage lui-même.

En effet, en tant que langages, ils possèdent un vocabulaire et une grammaire, et ce vocabulaire comporte à la fois des « types de nature d’objet » (tableaux, nombres, texte…), des fonctions qui pourront agir sur ces objets (concaténer, changer le type, décomposer…), des valeurs attribuables à ces objets — qui peuvent être elles-mêmes des objets — et des réponses aux fonctions appliquées à ces objets (true, 2, un tableau (array), « un texte »).

Les services en ligne

Après l’inscription à un site permettant cela, et par le biais d’une interface vous pouvez créer un site Web. Ce site aura forcément des fonctionnalités limitées (mais qui peuvent suffire à votre besoin) et aura une adaptation graphique limitée (intégration de logo, choix de couleur pour certaines zones, choix des typos dans un catalogue donné…).

Parmi les sites les plus connus pour ce type de service :

Pour les boutiques en ligne, vous pouvez utiliser différents services :

Et pour en savoir plus http://www.commentcamarche.net/faq/9729-creer-une-boutique-en-ligne et éventuellement, voir aussi http://www.leparisien.fr/economie/ouvrir-une-boutique-en-ligne-mode-d-emploi-20-10-2014-4227719.php.
Voir aussi l’article sur le comparatif des différentes solutions : https://www.lafabriquedunet.fr/creation-site-ecommerce/articles/comparatif-logiciels-gratuits-creation-site-ecommerce/

Via un CMS

Différents CMS Web

Un CMS est un système de gestion de contenu ou SGC (content management system – CMS en anglais). C’est une famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d’applications multimédia. Ils partagent les fonctionnalités suivantes :

  • Ils permettent à plusieurs individus de travailler sur un même document ;
  • Ils fournissent une chaîne de publication (workflow) offrant par exemple la possibilité de mettre en ligne le contenu des documents ;
  • Ils permettent de séparer les opérations de gestion de la forme et du contenu ;
  • Ils permettent de structurer le contenu (utilisation de FAQ, de documents, de blogs, de forums de discussion, etc.) ;
  • Ils permettent de hiérarchiser les utilisateurs et de leur attribuer des rôles et des permissions (utilisateur anonyme, administrateur, contributeur, etc.) ;
  • certains SGC incluent la gestion de versions.

Parmi les CMS les plus connus : WordPress, SPIP, Drupal et Typo3 et pour les CMS spécialisés boutique en ligne : Magento et Prestashop. Prestashop se présente aussi sous forme de plug-in pour WordPress et Magento s’adapte bien avec Drupal.
Chacun de ces CMS possède des plug-ins permettant l’ajout de fonctionnalité qui ne sont pas présents dans leur version de base.

WordPress est le CMS le plus utilisé, mais aussi celui qui est le plus attaqué par les pirates et qui présente statistiquement le plus de faille de sécurité. SPIP a contrario est un très bon CMS pour du contenu éditorial. Son avantage est qu’il est basé sur son propre langage (« les boucles ») et qui permet donc un développement sécurisé de l’interface. Par contre, son habillage de base est très dépouillé et nécessite des connaissances HTML / CSS pour l’améliorer.

Si un CMS est installable sans grande connaissance technique, il y a toujours des problèmes ou des manques de connaissances tant lors de l’installation ou sa gestion et plus encore pour son développement et son adaptation au besoin qui demande souvent des connaissances dans les langages de programmation (PHP, MySQL et JavaScript). Dans tous les cas vous avez besoin d’un hébergement (compatible avec la version du CMS) et un nom de domaine rattaché à cet hébergement. Il est nécessaire de veiller à toujours faire les mises à jour tant du CMS lui-même que des plug-ins que vous avez ajoutés.

À l’aide d’un framework

Différents framework pour le Web

Un framework désigne en programmation informatique un ensemble d’outils et de composants logiciels à la base d’un logiciel ou d’une application. C’est le framework, ou structure logicielle en français, qui établit les fondations d’un logiciel ou son squelette. Un framework est donc un « espace de programmation » possédant des fonctionnalités préprogrammées, des objets établis et les principes de sécurisation déjà mis en place. C’est un outil pour développeur qui nécessite non seulement un bon niveau de programmation, mais aussi une bonne connaissance du framework lui-même.
Parmi les principaux frameworks orientés Web :

  • Pour PHP : Symphonie, cakePHP, FuelPHP, Zend...
  • Pour python : Django
  • Multi plateforme : Java (sous différentes versions) SE / EE / ME / FX
  • Pour Ruby : Ruby on Rails
  • Pour JavaScript : Angular, react JS, Vue JS, Google Web toolkit, Bootstrap (provient de Twitter), Foundation...
  • Pour CSS : Pure css, Cascade

Il existe aussi des bibliothèques permettant de simplifier la programmation comme Jquery ou React. Ces bibliothèques, outre de faciliter le développement, possèdent souvent des fonctionnalités clé en main sous forme de modules adaptables (plug-in).

Voir aussi https://www.codeur.com/blog/front-end-framework/ pour les frameworks d’interface Web.

En développement complet

Enfin un site peut être développé entièrement à la main ex nihilo.

Il est nécessaire à ce moment, tout comme à l’aide d’un framework, d’avoir bien évidemment de fortes connaissances en HTML, CSS, et en langage de programmation. Évidemment le cahier des charges d’une telle création doit particulièrement être précis... même si c’est un peu toujours le cas !

Conclusion : la nécessité d’un cahier des charges

Quelque soit votre choix, et que vous œuvrez seul ou à l’aide de prestataire, il est nécessaire de toujours penser votre projet avant de vous lancer dans sa construction.

Même si vous utilisez des services en ligne, penser à quoi va vous servir votre site, à qui il s’adresse, comment allez-vous organiser son contenu (arborescence), quelle liberté graphique avez-vous sur l’outil et comment allez-vous l’utiliser, quelles fonctionnalités vous permet l’outil...

Le cahier des charges est la base de la création Web.

Post-scriptum

Si un quart des sites existants le sont sur WordPress il semblerait que ce CMS soit victime de son succès et la cible de nombreux piratages. En février 2017, le site developpez.com titrait l’un de ses articles : WordPress : Plus de 90 000 sites et blogs seraient victimes d’attaques lancées par quatre groupes de hackers [1] dans lequel il présentait les trois failles de sécurité de la version 4.7.1 dont une faille de type injection SQL et XSS (Cross-site scripting [2]) et en mai 2017, un article du blogdumoderateur.com [3] indique que : en juillet 2016, Dawid Golunski repère une faille sur WordPress. Il prévient alors les équipes du CMS, qui ne réagissent pas (aucun patch de sécurité n’a été déployé). Aujourd’hui, il décide de présenter cette faille au grand public. Il s’agit d’une faille 0day [4], elle est donc présente sur toutes les versions (jusqu’à WordPress 4.7.4). Ces failles de sécurité montrent combien il est difficile pour un amateur de réagir à ce type de problème. De plus, à propos de WordPress, le site developpez.com montre dans un article [5] que le CMS le plus utilisé, ne convient visiblement pas non plus au développeur notamment parce que « la facilité d’utilisation pour les non- développeurs n’est pas compatible avec la sécurité », mais aussi parce que « WordPress est construit pour les architectures Web obsolètes ». Pour ma part, je ne suis pas non plus convaincu par sa gestion du contenu dont la répartition se fait en partie à travers les menus.


[1Par Malick https://www.developpez.com/actu/116977/WordPress-Plus-de-90-000-sites-et-blogs-seraient-victimes-d-attaques- lancees-par-quatre-groupes-de-hackers-alterant-ainsi-leur-contenu/ Le 9 février 2017

[2Faille de sécurité permettant l’injection de contenu dans une page

[4Cette faille de sécurité permet de récupérer le mot de passe de l’administrateur

[5Michael Guilloux. En tant que développeur, que détestez-vous le plus dans WordPress ? Partagez votre expérience
https://www.developpez.com/actu/127825/En-tant-que-developpeur-que-detestez-vous-le-plus-dans-WordPress-Partagez-votre- experience/ 3 avril 2017

u