Développeur web – Choisir sa formation
Afin de mieux choisir sa formation
Les différents métiers du développement Web
Développeur logiciel
Développement "lourds", qui désigne des logiciels que l'on vient installer sur son système d'exploitation (en comparaison aux logiciels "web" qu'il n'y a pas besoin d'installer). Il faut savoir reproduire des interfaces, gérer les données qui y sont entrées par l’utilisateur, traiter ces données au travers de différents algorithmes afin de résoudre un problème ou de proposer une fonctionnalité à l'utilisateur final. Choisir ses langages, les technologies et plateformes sur lesquels ces logiciels fonctionneront.
Développeur de jeux vidéo
Spécialisés sur les outils spécifiques à cet univers comme l'utilisation de moteurs graphiques ou physiques pour la réalisation d'expériences vidéo-ludiques. Ce qui demande une compréhension correcte des mathématiques, notamment lors du développement d'univers 3D, même si des moteurs de jeux simplifie ces calculs au maximum.
Développeur mobile
Tout comme le développeur logiciel avec une différente plateforme d'exécution.
Le mobile possède des caractéristiques et des contraintes bien particulières telles que la taille de l'écran, l’interaction tactile, la batterie, la puissance, le système d'exploitation, les capteurs, le store,...
Un développeur mobile se spécialise généralement sur une plateforme car le développement d'applications sur iOS ou Android relèvent d'outils et langages complètement différents.
Développeur web
Faire prendre vie avec du code les visuels (maquettes) créés par le web designer.
Implémenter les fonctionnalités nécessaires aux bon fonctionnement du site (gestions des utilisateurs, des contenus, sauvegarde des données, etc...) grâce à la partie serveur et la base de données.
Certains se spécialisent sur des plateformes de gestions de contenu (aussi appelées CMS, comme WordPress), tandis que d'autres vont sur des projets partant de zéro ("from scratch").
Développeur web front-end
Spécialisé dans la réalisation de toute la partie visible des projets web, c'est à dire l'intégration du design, des animations, l'accessibilité, l'adaptativité aux différentes tailles d'écrans, mais aussi la logique de navigation, l'échange et la vérification des données,...
Développeur web back-end
Se concentre sur la partie immergée de l'iceberg, le traitement et la sécurité des données, leur sauvegarde, les calculs invisibles à l'utilisateur et autres algorithmes complexes.
Les langages, méthodes et technologies du développeur back-end sont très similaires au métier de certains développeurs logiciels.
Développeur web fullstack
Il est capable de gérer la partie technique d'un projet web de bout en bout (front-end, back-end, déploiement) et demande une variété de technologies à apprendre et à maitriser.
Beaucoup de développeurs web commencent en tant que développeurs fullstack mais finissent par se spécialiser d'un côté ou de l'autre car devenir expert dans toutes les technologies demandées pour être fullstack relève de l'exploit.
Développeur embarqué
Il travaille avec des technologies "bas-niveau", c'est à dire au plus près des composants électroniques afin de créer des logiciels fonctionnant sur des appareils possédant une puissance de calculs généralement limitée ou des contraintes de mobilité, d'autonomie comme les objets connectés (capteurs, montres,etc...) , les ordinateurs de bord (voiture, avions, etc...), certaines machines industrielles, et pleins d'autres appareils électroniques qui demandent une programmation précise et spécifique à sa conception matérielle.
Non qualifiés "développeurs" mais une connaissance de la programmation
Administrateur Système
En charge de réfléchir, d'installer, de paramétrer, d'améliorer et de maintenir les systèmes informatiques sur lesquels les développeurs vont travailler ou déployer leurs applications.
Ses champs d'expertise se concentrent sur les systèmes d'exploitation ainsi que le réseau et même si il ne fait pas de "développement" à proprement parlé, il utilise ces compétences en programmation pour créer des scripts d'automatisation pour gérer la création ou la maintenance des systèmes qu'il déploie.
DevOps
Spécialisé en administration système, cloud, etc... qui sera capable de mettre en place les environnements de production des applications développées et de mettre en place les outils et infrastructures nécessaires pour que les déploiements des projets se passe au mieux.
Analyste en Cybersécurité
La cybersécurité se passe à différents niveaux (matériel, logiciel, humain, etc...) et les connaissances d'un expert dans ce domaine ne doit pas seulement se limiter à la programmation mais aussi à l'administration système, au réseau, aux mathématiques et à la cryptographie, etc...
Testeur Qualité
Ce métier, testeur QA (Quality Insurance) est souvent une évolution du métier de développeur pour les personnes qui sont attachés à la robustesse et à l'optimisation du code.
Il mets en place des stratégies de tests, automatisés ou non, en relation avec un cahier des charges afin de vérifier que le logiciel produit ne présente pas de dysfonctionnement ou que les anomalies relevées ont été correctement corrigées.
Data Scientist
L'efficacité des systèmes de Big Data et d'Intelligence Artificielle (comme le Machine Learning par exemple) repose sur la qualité des données en entrée ainsi que l'analyse des données en sortie.
Son rôle est de trouver ou créer des solutions pour retravailler des jeux de données afin d'en extraire le sens grâce à des outils informatiques ou d'analyses mathématiques et statistiques.
La liste des choses à connaitre
HTML (HyperText Markup Language)
Comprendre ce qu'est un fichier HTML, comment il est construit, les différences entre l'en-tête et le corps du document ainsi que les liens hyper-textes entre différentes pages d'un site c'est comprendre la base du web.
Chaque élément html a une manière d'être représenté graphique par défaut, mais a aussi une sémantique (un sens, une fonction) bien précise.
- Les éléments HTML (aussi appelés balises) :
- Les titres (h1, h2, h3, ...)
- Les textes et liens (p, span, a)
- Les images (img)
- Les blocs (div, section,...)
- Les tableaux (table, tr, td, ...)
- Les formulaires (input, button, ...)
- Les listes (ul, ol, li) ...
CSS (Cascading Style Sheet)
Le HTML seul vous permet de structurer les pages et d'arriver à un résultat qui ressemble plus ou moins à un document créé sous Word. Mais avec le CSS, vous pourrez modifier le design de ce document.
L'apprentissage du CSS se déroule en deux étapes, les sélecteurs et les attributs.
1) Les sélecteurs permettent de choisir quel éléments seront affectés par votre style personnalisé grâce à différentes règles (id, classes, noms d'éléments, évènements et autres sélecteurs plus complexes)
2) Les attributs permettent de décider du style final appliqué à ces éléments :
- L'affichage et le positionnement (display, visibility, position, left, margin-left, padding-left, ...)
- Les couleurs (color, border-color, background-color, ...)
- Les formes (width, height, border-radius, ...) ...
JavaScript
Le seul langage de programmation (à proprement parler) qui soit nativement interprété par le navigateur, c'est une technologie incontournable à maitriser qui ajoute de l'interactivité à votre site web (par exemple : jeux, réponses quand on clique sur un bouton ou des données entrées dans des formulaires, composition dynamique, animations).
Il vous permettra d'ajouter de la logique dans vos sites et applications, de faire des calculs (algorithmie) et d'ajouter des intéractions dans vos pages (autres que les clics sur les liens).
Vous devrez d'abord apprendre la logique de programmation ainsi que la syntaxe du langage, puis vous pourrez faire
intéragir votre code Javascript avec vos pages HTML grâce aux API du navigateur.
Les aides avec la magie des Framework
Frameworks CSS
Il existe beaucoup de frameworks et de bibliothèques CSS que vous pouvez utiliser pour gagner du temps, Une fois que vous aurez une bonne maîtrise du HTML et du CSS, voilà quelques outils intéressants que vous pourrez étudier :
- Les pré-processeurs (SASS/LESS/SCSS)
- Les frameworks (Bootstrap, Bulma, ...)
- Les bibliothèques (Tailwind, ...) ...
Frameworks Javascript
React, Vue ou encore Angular, tous sont à la fois différents, puissant et méritent d'être testés afin de choisir celui que vous préférez. La majorités des postes pour devenir développeur front-end demandent la maitrise de l'un de ces trois frameworks.
TypeScript
Le TypeScript est un langage de programmation développé par Microsoft en 2012. Son ambition principale est d'améliorer la productivité de développement d'applications complexes. C'est un langage open source, développé comme un sur-ensemble de Javascript.
Il faut l'apprendre tôt dans le parcours.
Cest un langage qui sera transpilé en Javascript et qui permet aux développeurs de rendre le typage des variables stricts, contrairement au typage dynamique de Javascript, et donc d'éviter de nombreuses erreurs lors de la phase de développement.
Le versionning de code
Quand vous codez, tout se passe dans les fichiers de votre dossier.
Si vous voulez collaborer avec d'autres personnes sans risquer de tout corrompre ou revenir à une version antérieure, il faut utiliser un gestionnaire de version comme Git et des plateformes comme Github.
Cela vous permettra de synchroniser plusieurs instances de votre projet, de sauvegarder chaque état d'avancement du site, de travailler à plusieurs sans conflit et de revenir en arrière si besoin.
Hébergement
Aprés avoir construit un site avec des pages reliées entre-elles par des liens et suivant un design personnalisé, on dépose le dossier chez un hébérgeur afin qu'il soit visible par tous.
Voici les questions à poser à Google.
- Ce qu'est un serveur, et plus particulièrement un serveur web ?
- Qu'est-ce qu'une requête HTTP ?
- Les noms de domaines et les DNS
- Les différents types d'hébergement disponible (mutualisé, VPS,...)
- Comment déployer son site (FTP, SFTP)
Sur ce coup faisons simple et hébergeons le site chez le meilleur fournisseur en France "O2SWITCH"
Les APIs du navigateur
Une API (Application-programming interface) désigne un ensemble de solutions logicielles dont la complexité est cachée derrière un ensemble de méthodes simples d'utilisation pour un développeur.
Un navigateur web va donc mettre à disposition un certains nombre de ces APIs à disposition des développeurs pour que ces denières soient appelés en Javascript.
L'API la plus connue est celle du DOM (Document Object Model) qui donne la possibilité au développeur d'intéragir avec les éléments HTML présents sur la page pour :
- Modifier le contenu de la page
- Injecter du contenu dynamique (textes, images, etc...).
- Ajouter des intéractions lors d'un évènement (clic, scroll, touche clavier)
- Récupérer les données entrées par l'utilisateur dans des champs HTML ...
Même si l'API du DOM est absolument indispensable à maîtriser, il existe bien d'autres API mise à votre disposition qui sont très puissantes :
- Le localStorage (pour stocker des données en local)
- Les APIs audio et vidéo
- Le bluetooth
- La lecture de fichiers ...
En exploitant toute la puissance mise à disposition par le navigateur, vous pourrez alors créer des applications complexes et intéressantes pour vos utilisateurs.
Les appels HTTP
Aprés les APIs du navigateur, voici les appels HTTP.
Les navigateurs mettent à disposition deux APIs en particulier, l'une plus ancienne "XMLHTTPRequest" et l'autre beaucoup plus récente : "Fetch"
Malgrés leurs noms bien différents, toutes deux permettent d'effectuer des appels à un serveur de données dans le but soit de récupérer des données détenues par le serveur, soit d'en envoyer, le tout sans changer de page.
Algorithmie
L'algorithmie consiste à trouver une solution technique à une problématique en associant des éléments de logique et de mathématique, exemple : Trier une liste d'utilisateurs en fonction de leur nom et de leur profession.
Dans le développement web, l'algorithme ressemble à une suite d'instructions et de lignes de code faisant une tâche précise. Il existe des ensembles d'algorithmes que l'on nomme parce qu'on s'en sert souvent ou parce qu'il y en a de nombreuses variantes. Comme les algorithmes de tri, par exemple.
Vous devez comprendre la sécurité et les failles
À partir du moment où votre site web commence à envoyer et à récupérer des données, vous devez être au courant des enjeux de la sécurité web.
L'OWASP (Open Web Application Security Project) est un projet Open Source. Il réunit des experts bénévoles autour d'un objectif commun : éduquer les professionnels du web en matière de sécurité.
Le groupe vient pour cela de publier la liste des dix failles les plus courantes sur le web. Elles sont pour la plupart connues depuis très longtemps mais, étrangement, de nombreux projets web en sont encore victimes aujourd'hui.
Voici les dix erreurs-type dénoncées par l'OWASP :
1. Oubli de valider les entrées des utilisateurs.
Un classique, qui permet aux pirates de faire accepter des commandes au serveur à travers un formulaire web ou une simple URL, ou d'exécuter des contenus dynamiques (Javascript, par exemple) chez les autres utilisateurs d'un site.
2. Contrôle d'accès inefficace.
Mauvaise mise en oeuvre des outils de contrôle d'accès (fichier .htpasswd lisible par tous, mots de passes nuls par défaut, etc...).
3. Mauvaise gestion des sessions.
Cela permet aux pirates de "voler des sessions" d'autres utilisateurs (en devinant un numéro de session simple, en dérobant un cookie, ou en allant regarder les fichiers de sessions de PHP).
4. Cross Site Scripting.
Un autre grand classique, lui aussi lié à un manque de contrôle des entrées de l'utilisateur. Cette faille touche les sites web qui laissent les internautes publier du code HTML susceptible d'être vu par les autres utilisateurs du site (dans un forum, par exemple). Cela permet d'exécuter des contenus dynamiques sur les navigateurs des internautes, avec les droits associés au site web.
5. Dépassement de mémoire tampon.
Une faille vieille comme le monde, qui frappe certains langages de programmation plus que d'autres (le C, par exemple). Si des composants CGI sont (mal) écrits dans ces langages, il peut-être simple de compromettre totalement le serveur par une telle attaque.
6. Injection de commandes.
Là encore, la source de la faille est un manque de contrôle des entrées de l'utilisateur. Elle permet au pirate de faire exécuter des commandes au serveur (au système d'exploitation ou à un serveur SQL, par exemple) en les attachant à une entrée web légitime avant que celle-ci ne soit transmise au serveur.
7. Mauvaise gestion des erreurs.
Les messages d'erreur utiles aux développeurs le sont souvent aussi pour les pirates ! Il faut donc penser à les supprimer une fois le développement terminé.
8. Mauvaise utilisation du chiffrement.
La mise en oeuvre du chiffrement au sein des applications web se révèle ardue. Des développeurs non spécialisés peuvent commettre des erreurs difficiles à déceler et créer ainsi une protection illusoire.
9. Failles dans l'administration distante.
C'est la voie royale : si les pages réservées aux administrateurs du site ne sont pas réellement protégées (authentification forte du client, chiffrement, contrôles réguliers...), un pirate peut prendre le contrôle du site sans avoir à pirater le serveur. Une aubaine, en quelque sorte.
10. Mauvaise configuration du serveur web et des applications.
Un classique : le serveur web qui permet de lister n'importe quel répertoire, ou les outils de développement qui laissent des versions temporaires des fichiers, lisibles par tout le monde. Avant de mettre un serveur en ligne, il est bon de faire le ménage et de bien comprendre toutes les options de ses fichiers de configuration...
Toutes ces failles sont à l'origine de la très grande majorité des piratages sur le web. Elles sont bien sûr parfois difficiles à traquer à posteriori, mais en les prenant en compte dès le début d'un projet, il est possible de les minimiser de façon efficace. Encore faut-il y penser...
Le RGPD
La "Réglementation Générale pour la Protection des Données" est un ensemble de règle à suivre en Europe dés que l'on collecte des données utilisateurs. Un non-respect de la RGPD peut entraîner une forte amende basée sur le chiffre d'affaires de l'entreprise et la responsabilité en tant que développeur peut vous en être incombée.
Accessibilité du web
L'accessibilité du web est la problématique de l'accès aux contenus et services web par les personnes handicapées (déficients visuels, sourds, malentendants, etc.) et plus généralement par tous les utilisateurs quels que soient leurs dispositifs d’accès (mobile, tablette, etc.) ou leurs conditions d’environnement (niveau sonore, éclairement, etc.).
Les pratiques d'accessibilité cherchent à réduire ou supprimer les obstacles qui empêchent les utilisateurs d'accéder à des contenus ou d'interagir avec des services. Par exemple, en ajoutant un texte de remplacement aux images, qui permet aux déficients visuels d'accéder à l'information même sans voir l'image.
L'accessibilité est définie par des normes techniques établies par la Web Accessibility Initiative (WAI) du World Wide Web Consortium (W3C). Elle nécessite un traitement tout au long du cycle de vie d'un site web, par l'ensemble de ses acteurs, via des méthodes d'applications, des référentiels métiers et une démarche de suivi.
En outre, l'accessibilité Web protège votre entreprise en se conformant aux directives locales et mondiales telles que les directives d'accessibilité de conformité du site Web (WCAG) et ADA. Par conséquent, l'accessibilité Web est quelque chose que vous ne devez pas ignorer.
Les optimisations
SEO
Le SEO est un acronyme anglais pour le "référencement naturel", autrement dit les méthodes et les bonnes pratiques à connaitre afin que le site puisse être trouvé de la manière la plus efficace possible sur les moteurs de recherches.
Optimisation
Cela passe par de nombreuses pratiques et influence notamment l'accessibilité et le SEO.
Voici quelques exemples d'optimisation :
- Mettre en place un CDN (content delivery network).
- Gérer le cache.
- Mettre en place une compression Gzip.
- Faire attention à la taille/nombre des fichiers (images, js, css, ...) ...
Tooling (Webpack)
- Représente les outils utilisés autour de votre projet afin d'optimiser votre temps, ainsi que la compatibilité ou les performances.
- Webpack pour gérer des modules, minifier et optimiser ses fichiers.
- Babel pour transpiler du code Javascript vers d'ancienne version pour améliorer la compatibilité avec certains navigateurs
NPM pour gérer ses dépendances...
En résumé apprenez les thématiques ci-dessous :
HTML (HyperText Markup Language)
CSS (Cascading Style Sheet)
Hébergement
Le versionning de code
Javascript
Les APIs du navigateur
Algorithmie
AJAX
Sécurité
RGPD
Accessibilité
SEO
Optimisation
Tooling
Frameworks CSS
Frameworks Javascript
Typescript
