Environnement et technologies web

BREVET D’ENSEIGNEMENT SUPERIEUR
WEB DESIGNER / WEB DEVELOPER
UF : Environnement et technologies Web
(40p)
Année scolaire 2018 - 2019
Chargé(e) de cours : Julien Costenaro

Sommaire
A. La terminologie web
1. Qu'est-ce qu'une URL ?................................................................................................................................ 3
2. Qu'est-ce que le HTML ? .............................................................................................................................. 5
3. Qu'est-ce que le CSS ?.................................................................................................................................. 7
4. Qu'est-ce que le JAVASCRIPT ? .................................................................................................................... 8
5. Qu'est-ce que le PHP et MYSQL ? ................................................................................................................ 9
6. Qu'est-ce qu'un flux RSS ?.......................................................................................................................... 10
7. Qu'est-ce qu'une extension de navigateur ? ............................................................................................. 11
8. Qu'est-ce qu'un PROXY ? ........................................................................................................................... 13
B. Les métiers du Web
1. Consultant(e) Web..................................................................................................................................... 15
2. Chef de projet Web.................................................................................................................................... 17
3. Webmaster................................................................................................................................................. 19
4. Ergonome................................................................................................................................................... 20
5. Graphiste.................................................................................................................................................... 23
6. Web Designer............................................................................................................................................. 25
7. Web Developer .......................................................................................................................................... 27
8. Intégrateur Web......................................................................................................................................... 29
C. Standardisation Web
1. Quel est l'organisme en charge des normalisations Web ?....................................................................... 32
2. Quels sont ses missions ?........................................................................................................................... 32
3. Quels outils met-il à disposition des concepteurs, et à quelle fin ? .......................................................... 33

A. La terminologie web
1. Qu'est-ce qu'une URL ?
URL signifie Uniform Resource Locator (ou, en français, « localisateur uniforme de
ressource »). Une URL est simplement l'adresse d'une ressource donnée, unique sur le
Web. En théorie, chaque URL valide pointe vers une ressource unique. Ces ressources
peuvent être des pages HTML, des documents CSS, des images, etc. En pratique, il y a
quelques exceptions : les URL peuvent pointer vers une ressource qui n'existe plus ou qui
a été déplacée. La ressource représentée par l'URL et l'URL elle-même sont gérées par le
serveur web. C'est donc au gestionnaire de ce serveur que de gérer soigneusement la
ressource et l'URL associée 1
.
Voici quelques exemples d'URL :
https://developer.mozilla.org
https://developer.mozilla.org/fr/docs/Apprendre/
https://developer.mozilla.org/fr/search?q=URL
http:// correspond au protocole. Ce
fragment indique au navigateur le
protocole qui doit être utilisé pour
récupérer le contenu. Généralement, ce
protocole sera HTTP ou sa version
sécurisée : HTTPS. Le « Web »
fonctionne autour de ces deux protocoles
mais le navigateur peut parfois gérer
d'autres protocoles comme mailto: (qui
permet d'ouvrir un client de messagerie
électronique) ou ftp: qui permet de
transférer des fichiers. Ne soyez pas
surpris donc si vous rencontrez ces autres
protocoles.
_____________________________________________________________
1. https://developer.mozilla.org/fr/docs/Apprendre/Comprendre_les_URL

www.exemple.com correspond au nom
de domaine. Il indique le serveur web
auquel le navigateur s'adresse pour
échanger le contenu. À la place du nom
de domaine, on peut utiliser une adresse
IP, ce qui sera moins pratique (et qui est
donc moins utilisé sur le Web).
:80 correspond au port utilisé sur le
serveur web. Il indique la « porte »
technique à utiliser pour accéder aux
ressources du serveur. Généralement, ce
fragment est absent car le navigateur
utilise les ports standards associés aux
protocoles (80 pour HTTP, 443 pour
HTTPS). Si le port utilisé par le serveur
n'est pas celui par défaut, il faudra
l'indiquer.
/chemin/vers/monfichier.html est
le chemin, sur le serveur web, vers la
ressource. Aux débuts du Web, ce chemin
correspondait souvent à un chemin «
physique » existant sur le serveur. De nos
jours, ce chemin n'est qu'une abstraction
qui est gérée par le serveur web, il ne
correspond plus à une réalité « physique
».
?clé1=valeur1&clé2=valeur2 sont
des paramètres supplémentaires fournis
au serveur web. Ces paramètres sont
construits sous la forme d'une liste de
paires de clé/valeur dont chaque élément
est séparé par une esperluette (&). Le
serveur web pourra utiliser ces
paramètres pour effectuer des actions
supplémentaires avant d'envoyer la
ressource. Chaque serveur web possède
ses propres règles quant aux paramètres.
Afin de les connaître, le mieux est de
demander au propriétaire du serveur.

#QuelquePartDansLeDocument corres
pond à une ancre, celle-ci désigne un
endroit donné de la ressource. Une ancre
représente, en quelque sorte, un marque-
page à l'intérieur de la ressource. Ajouter
une ancre à une URL permet au
navigateur d'afficher la ressource à
l'endroit de ce marque page. Pour un
document HTML, par exemple, le
navigateur défilera la page jusqu'au
niveau de l'ancre. Pour un document
audio ou vidéo, le navigateur ira se placer
à l'instant représenté par l'ancre. On
notera également que la partie de l'URL
située après le # n'est jamais envoyée au
serveur avec la requête.
2. Qu'est-ce que le HTML ?
HTML signifie « HyperText Markup Language » qu'on peut traduire par « langage de
balises pour l'hypertexte ». Il est utilisé afin de créer et de représenter le contenu d'une
page web et sa structure. D'autres technologies sont utilisées avec HTML pour décrire la
présentation d'une page (CSS) et/ou ses fonctionnalités interactives (JavaScript).
HTML fonctionne grâce à des « balises » qui sont insérées au sein d'un texte normal.
Chacune de ces balises indique la signification de telle ou telle portion de texte dans le
site. On parle d'« hypertexte » en référence aux liens qui connectent les pages web entre
elles. C'est la mécanique originelle du « World Wide Web » que nous connaissons
aujourd'hui. En écrivant et publiant des pages web, vous devenez un acteur du Web dès
que votre site est accessible en ligne.
HTML permet d'inclure des images et d'autres contenus dans les pages web. Grâce à
HTML, chacun peut créer des sites web aussi bien statiques que dynamiques. HTML est le
langage qui permet de décrire la structure et le contenu d'un document web. Ce contenu
est balisé par des éléments HTML
comme <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>,
<span>, <img> et bien d'autres encore. Ces éléments forment les blocs utilisés pour
construire un site web 1
.
_____________________________________________________________
1. https://developer.mozilla.org/fr/docs/Web/Guide/HTML

Un nouveau HTML5 permet d’intégrer de nombreux contenus plus facilement. Nombre
de plugins et autres alternatives sont ainsi devenus obsolètes.
Exemple : Pour améliorer l’insinuation du code, des améliorations ont été apportées à
la sémantique des divers éléments existants. Section, article, nav et header, footer sont
des nouveaux éléments qui ont remplacé la plupart des éléments div maintenant
obsolètes, ce qui a rendu le processus de balayage des erreurs beaucoup plus simple 1
.
_____________________________________________________________
1. https://www.hostinger.fr/tutoriels/differences-html/#gref

3. Qu'est-ce que le CSS ?
Cascading Style Sheets (CSS) est un langage de feuille de style utilisé pour
décrire la présentation d'un document écrit en HTML ou en XML (on inclut ici les langages
basés sur XML comme SVG ou XHTML). CSS décrit la façon dont les éléments doivent
être affichés à l'écran, sur du papier, en vocalisation, ou sur d'autres supports 1
.
Les caractéristiques applicables aux boîtes CSS sont exprimées sous forme de
couples propriété: valeur .
Les propriétés sont regroupées par blocs de règles, délimités par les accolades {}. Chaque
bloc est précédé d'un sélecteur désignant les éléments structurels auxquelles les
propriétés concernées doivent être appliquées 2
:
button{
/*Contour : */
outline: none;
/*Bordure*/
border: none;
/*Couleur de fond : */
background-color: black;
/*Couleur de texte : */
color: white;
}
_____________________________________________________________
1. https://developer.mozilla.org/fr/docs/Web/CSS
2. https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade

4. Qu'est-ce que le JAVASCRIPT ?
JavaScript (qui est souvent abrégé en « JS ») est un langage de script léger, orienté
objet, principalement connu comme le langage de script des pages web. Il apporte aux
pages Web des fonctionnalités correspondant à des besoins spécifiques, et s'il est
désactivé pour une quelconque raison, le contenu ou l'utilisation de la page Web peuvent
s'en trouver restreints ou indisponibles1
.
Les codes JavaScript sont insérés au moyen de l'élément <script>. Cet élément
possède un attribut type qui sert à indiquer le type de langage que l'on va utiliser. En
HTML5, il n’est pas obligatoire. Si on n'utilise pas le HTML5, il faut que l'attribut type
prenne comme valeur text/javascript, qui est en fait le type MIME d'un code
JavaScript.
On peut placer du code JavaScript directement dans une page Web :
<body>
<script>
alert('Hello world!');
</script>
</body>
Il est possible, et même conseillé, d'écrire le code JavaScript dans un fichier externe,
portant l'extension .js 2
.
<body>
<script src="hello.js"></script>
</body>
_____________________________________________________________
1. https://www.enable-javascript.com/fr/
2. https://openclassrooms.com/fr/courses/1916641-dynamisez-vos-sites-web-avec-
javascript/1916901-premiers-pas-en-javascript

5. Qu'est-ce que le PHP et MYSQL ?
Les sites dynamiques sont plus complexes, ils utilisent d'autres langages en plus de
HTML et CSS, tels que PHP et MySQL.
PHP (officiellement, ce sigle est un acronyme récursif pour PHP Hypertext
Preprocessor ) est un langage de scripts généraliste et Open Source, spécialement conçu
pour le développement d'applications web. Il peut être intégré facilement au HTML 1
.
MySQL est un serveur de bases de données relationnelles Open Source. Son rôle est
d'enregistrer des données de manière organisée afin de vous aider à les retrouver
facilement plus tard
2
.
Le contenu de ces sites web est dit « dynamique » parce qu'il peut changer sans
l'intervention du webmaster. En effet, ceux-ci peuvent proposer des fonctionnalités bien
plus excitantes que les sites statiques. Par exemple :
 un espace membres : des visiteurs peuvent s'inscrire sur un site et avoir
accès à des sections qui leur sont réservées ;
 un forum : il est courant aujourd'hui de voir les sites web proposer un forum de
discussion pour s'entraider ou simplement passer le temps ;
 un compteur de visiteurs : on peut facilement compter le nombre de visiteurs
qui se sont connectés dans la journée sur le site, ou même connaître le
nombre de visiteurs en train d'y naviguer ;
 des actualités : on peut automatiser l'écriture d'actualités, en offrant aux
visiteurs la possibilité d'en rédiger, de les commenter, etc. ;
 une newsletter : on peut envoyer un e-mail aux membres régulièrement pour
leur présenter les nouveautés et les inciter ainsi à revenir sur le site
3
.
Cas d'un site dynamique
 Le client demande au serveur
à voir une page web ;
 le serveur prépare la page
spécialement pour le client ;
 le serveur lui envoie la page qu'il vient de générer.
_____________________________________________________________
1. http://php.net/manual/fr/intro-whatis.php
2. https://www.futura-sciences.com/tech/definitions/internet-mysql-4640/
3. https://openclassrooms.com/fr/courses/918836-concevez-votre-site-web-avec-php-et-
mysql/4237646-decouvrez-le-fonctionnement-dun-site-ecrit-en-php

PHP est un langage exécuté par le serveur. Il permet de personnaliser la page en
fonction du visiteur, de traiter ses messages, d'effectuer des calculs, etc. Il génère une
page HTML.
MySQL est un système de gestion de bases de données. Il se charge du stockage des
informations (liste des messages, des membres…)
1
.
6. Qu'est-ce qu'un flux RSS ?
Il y a deux moyens qui permettent aux gens de rester informés de votre site Web ou
de votre entreprise, ce sont les flux RSS et les newsletters électroniques.
Un flux RSS est un format de fichier particulier dont le contenu est produit
automatiquement (sauf cas exceptionnels) en fonction des mises à jour d'un site web. Ce
contenu est laissé au libre choix du producteur du flux, mais très généralement se
compose des titres des mises à jour de pages ou d'articles (par exemple : "nouvelle
promotion"), des liens hypertextes correspondants, et de descriptions, en quelques lignes,
de ces mises à jour (par exemple : "Prix sacrifiés sur la mémoire pendant trois jours.
Profitez-en")
2
.
Exemple du fichier RSS :
<rss xmlns:atom="https://www.w3.org/2005/Atom" version="2.0">
<channel>
<title>
Argent & Placements : Toute l'actualité sur Le Monde.fr.
</title>
<description>
Argent & Placements - Découvrez gratuitement tous les articles, les vidéos et
les infographies de la rubrique Argent & Placements sur Le Monde.fr.
</description>
<copyright>Copyright Le Monde.fr</copyright>
<link>https://www.lemonde.fr/argent/rss_full.xml</link>
<atom:link href="https://www.lemonde.fr/argent/rss_full.xml" rel="self" type="appli
cation/rss+xml"/>
<pubDate>Mon, 14 Jan 2019 17:52:54 +0100</pubDate>
....
Pour savoir lire les flux RSS il faut être inscrite chez un éditeur comme Feedly.com,
FeedReader.com, Netvibes.com ou installer une extension spéciale sur le browser.
Une newsletter est une lettre d'information envoyée régulièrement par e-mail à une
liste de diffusion, c'est-à-dire à des abonnés.
_____________________________________________________________
1. https://openclassrooms.com/fr/courses/918836-concevez-votre-site-web-avec-php-et-
mysql/4237646-decouvrez-le-fonctionnement-dun-site-ecrit-en-php
2. https://www.journaldunet.com/solutions/dsi/1125572-rss-qu-est-ce-que-c-est-comment-en-
profiter/

En marketing, une newsletter est à vocation commerciale. Elle peut servir à informer les
abonnés de certaines promotions ou opérations commerciales spéciales, ou bien comporter un
contenu éditorial informatif, par exemple pour présenter un nouveau produit ou préparer la mise
sur le marché d'une nouvelle offre de services. Dans l'e-commerce, c'est un moyen rapide et
quasiment gratuit d'atteindre un grand nombre de prospects et d'augmenter les ventes, en
fonction du nombre d'utilisateurs enregistrés dans la base de données.
Par rapport aux newsletters, le flux RSS a plusieurs avantages. Il ne nécessite pas
d'envoyer un e-mailing, mais juste de produire (de manière automatisée) le fichier RSS à
chaque mise à jour. Il peut également être agrégé avec d'autres flux RSS. C'est le rôle des
lecteurs RSS que de permettre de s'abonner à plusieurs flux RSS comme on s'abonne à
des groupes de discussion ou une page sur un réseau social par exemple, pour les afficher
ensuite de manière agrégée dans une interface personnalisable.
Mais le flux RSS présente aussi un appauvrissement par rapport à la newsletter, et ne
peut donc la remplacer tout à fait. Le diffuseur n'a plus la main sur la présentation du
contenu. Il n'est pas possible, du moins facilement, d'insérer de la publicité autre que
textuelle, ou plus largement des effets visuels. Le flux RSS est souvent noyé parmi
d'autres flux similaires, diminuant ainsi l'impact d'une mise à jour
1
.
7. Qu'est-ce qu'une extension de navigateur ?
Une extension de navigateur est quelque chose de semblable à un plugin pour votre
navigateur qui y ajoute certaines capacités et fonctionnalités. Les extensions peuvent
modifier l’interface utilisateur ou ajouter des fonctionnalités de service web à votre
navigateur.
Les extensions sont par exemple utilisées pour bloquer des publicités sur des sites
internet, traduire du texte d’une langue à une autre ou ajouter des pages à un service de
signets tiers comme Evernote ou Pocket. Les extensions sont nombreuses : il y en a des
centaines, voire des milliers, pour la productivité, la personnalisation, les achats, les jeux,
etc 1
.
Concernant des concepteurs des sites web, ils peuvent personnaliser leur navigateur
avec des extensions comme DevTools de GoogleChrome, SEO serp, ColorPick
Eyedropper :
 DevTools est un ensemble d’outils de développement Web directement
intégrés au navigateur Google Chrome . DevTools peut vous aider à modifier
des pages à la volée et à diagnostiquer rapidement les problèmes, ce qui aide
finalement à créer de meilleurs sites Web, plus rapidement.
_____________________________________________________________
1. https://www.journaldunet.com/solutions/dsi/1125572-rss-qu-est-ce-que-c-est-comment-en-
profiter/

Par exemple, à l’aide de DevTools on peut inspecter la structure de HTML et des
styles des éléments.
 SEO serp analyse l'optimisation des moteurs de recherche, c’est un outil par
excellence conçu pour les développeurs web, webdesigners et toute
personne qui s'intéresse à SEO.
Par exemple, pour savoir comment un site (Websites) est positionné par
rapport à un mot-clé (Keyword to search) dans un moteur de recherche concret
(Search engine).
Dans le résultat on trouve la liste de 10 sites les mieux cotés dans un ordre
descendant.

 ColorPick Eyedropper c’est un outil qui permet de sélectionner des valeurs
de couleur à partir de pages Web.
Parfois sur les images en pixels est très difficile de pointer la couleur propre,
car il n’y a pas des frontière nettes entre des couleurs, ils se diffusent.
ColorPick Eyedropper grâce à sa fenêtre croissant la visibilité permet de
définir juste la couleur.
8. Qu'est-ce qu'un PROXY ?
Un serveur proxy (appelé aussi serveur mandataire en français) est, dans le cadre
des réseaux et d’internet, est une machine qui fait l’intermédiaire entre votre matériel
(ordinateur, smartphone, tablette…) et internet.
La principale conséquence de son utilisation : l’utilisation et donc l’affichage de
l’adresse IP du proxy et non celle du périphérique utilisé, ce qui permet de surfer
anonymement (ou presque) sur le web.
Car contrairement à ce que certains peuvent penser, vous n’êtes pas anonyme sur
internet, il est très facile de suivre votre navigation sur internet en traçant votre adresse
IP…
Pour utiliser un serveur proxy, il faut configurer son navigateur ou son ordinateur ou
alors utiliser un proxy web c’est-à-dire un site web qui va vous permettre de naviguer sur
d’autres sites à partir de ce site.
Cette deuxième solution est bien sûr la plus facile à mettre en œuvre puisqu’il suffit
juste de se rendre sur un site et de surfer sur le web via ce site, il n’y a pas de compétence
technique particulière à avoir ou de configuration de son navigateur à effectuer.

Son principal intérêt est de vous rendre anonyme (enfin pas tout à fait !) sur internet
puisque c’est l’adresse IP et le numéro de port sortant du serveur mandataire qui sont
détectés par les sites web que vous visitez et non l’adresse IP de votre connexion internet.
Une autre raison de l’utiliser peut être de consulter un site qui n’est pas accessible
depuis votre pays.
C’est le cas par exemple pour certaines vidéos qui ne peuvent être visionnées qu’aux
États-Unis par exemple : en configurant votre navigateur avec un serveur mandataire situé
dans ce pays, il sera possible de regarder le contenu bloqué.
Dernier intérêt : la sécurité et le filtrage.
Dans le cadre d’un réseau d’entreprise ou d’un réseau dans un établissement scolaire, il
va servir de filtre : le serveur peut par exemple choisir de bloquer des sites web prédéfinis
par des règles de filtrage (pornographie, réseaux sociaux etc.…).
L’anonymat n’est pas forcement absolu avec l’utilisation d’un proxy, il existe plusieurs
niveaux d’anonymat (le serveur mandataire enregistrant bien souvent votre adresse IP), la
vitesse de connexion variant selon le niveau d’anonymat (le plus haut niveau entrainant
une vitesse de connexion la plus lente…) 1
.
_____________________________________________________________
1. https://www.astuces-aide-informatique.info/876/definition-proxy

B. Les métiers du Web
1. Consultant(e) Web
Le rôle du consultant Web est d'analyser, d'évaluer les besoins, de conseiller et
proposer des solutions aux entreprises qui font appel à lui, tout cela en tirant avantage des
nouvelles technologies.
Activités principales
 Le consultant Internet accompagne une entreprise dans sa réflexion et la
réalisation d'un site web, d'un intranet, d'une application mobile.
 Il réalise un audit, c'est-à-dire qu'il identifie à la fois les besoins du client et
ceux des utilisateurs.
 Il analyse les informations collectées et peut ensuite conseiller l'entreprise en
proposant diverses solutions aux problèmes posés : quelle stratégie adopter
pour créer le site Internet ? Comment fidéliser les utilisateurs ? Comment sont
actualisées les données ?
 Il définit les moyens techniques, l'équipe nécessaires, le budget prévisionnel
pour lancer le projet.
 Le consultant Internet débute par une phase de recueil de besoins et de
partages d'expérience avec le client ou une équipe en interne. Lors de
réunions et d'entretiens, il écoute puis analyse les demandes pour proposer
des solutions adaptées. Il met alors en forme un cahier des charges pour que
l'équipe puisse développer le projet selon un périmètre défini ensemble.
Qualités requises
 Eloquent : Le consultant Internet doit avoir un grand sens relationnel. Il sait
écouter, négocier et convaincre. Sa capacité à communiquer et à vendre un
projet est une qualité essentielle.
 Imaginatif : Pour trouver les solutions adaptées aux besoins des clients, il fait
appel à son talent créatif.
 Cultivé : Il possède des connaissances en matière d'informatique et de
multimédia. Sa connaissance du monde de l'entreprise est un atout pour bien
appréhender le projet sur lequel il travaille.

Savoir-faire
 Analyser les processus métier
 Recenser les besoins du commanditaire
 Définir la faisabilité et la rentabilité d'un projet
 Définir des solutions fonctionnelles
 Présenter les évolutions du système d'information au commanditaire
 Établir un cahier des charges
 Procéder aux phases de tests et de recettes des applications développées
 Mettre en œuvre des préconisations fonctionnelles et techniques
 Déployer des applications
 Concevoir des supports d'information et de communication
 Former du personnel à des procédures et techniques
 Traiter l'information (collecter, classer et mettre à jour)
 Réaliser un suivi administratif des opérations de gestion des ressources
humaines
Savoir
 Outils de planification des ressources humaines
 Méthodes d'analyse (systémique, fonctionnelle, de risques,...)
 Droit de la propriété intellectuelle
 Gestion financière
 Réglementation sur la protection des données à caractère personnel
 Modélisation informatique
 Procédures d'élaboration d'un plan de tests (étapes, scénarii...)
 Infogérance / télémaintenance
_____________________________________________________________
1. https://www.oriane.info/consultant-internet

2. Chef de projet Web
Le chef de projet web coordonne les équipes techniques, de création et de production
pour mener à bien un projet web ou mobile.
En agence, il répond aux appels d'offres et demandes de clients potentiels. Quel
budget ? Quelles compétences au sein de l'équipe ? Quelle méthodologie appliquée ? A lui
de convaincre dans les éléments du cahier des charges que son agence est la mieux
placée pour développer le projet web à venir.
Une fois le contrat décroché, le chef de projet web réunit son équipe projet :
développeur, graphiste, rédacteur, etc. Il coordonne les activités de chacun, veille au
respect des délais et du budget !
Chez l'annonceur, il analyse les besoins internes, et rédige un cahier des charges
visant à compiler les étapes du projet, les intervenants, le budget.
Une fois le projet lancé, il est le garant du bon déroulement du développement du
projet. Charge à lui d'adapter les interventions en interne ou de prestataires, et d'assurer
un compte-rendu régulier de l'avancé du projet (développement, test, mise en production).
Qualités requises
 Curieux : Le chef de projet web mène une veille quotidienne pour dénicher
des bonnes pratiques et analyser ce qui se fait de mieux en ligne. Il partage
ensuite ses découvertes avec l'équipe.
 Capacité d'adaptation : Le web est en mouvement constant. Le chef de projet
web doit avoir une grande capacité d'adaptation pour dialoguer avec les
différents profils de son équipe, et ajuster le planning et les interventions de
chacun.
 Ouvert : Le travail en équipe est au cœur du quotidien du chef de projet web.
Chef d'orchestre d'un projet à mener, il doit savoir écouter chacun, orienter les
choix, coordonnée les actions.
Savoir-faire
 Analyser et définir les besoins de l'entreprise, des utilisateurs en matière
d'organisation et de systèmes d'information et de télécoms
 Concevoir le schéma directeur à partir des orientations fixées par la direction
et des besoins des services utilisateurs et superviser les modalités de mise en
œuvre
 Gérer le budget global d'une structure

 Piloter un projet
 Coordonner les différentes étapes d'un projet
 Procéder au choix de réalisation, de traitement en interne ou par sous-traitance
et en contrôler la conformité de réalisation
 Définir et contrôler l'application des procédures qualité et sécurité des
systèmes d'information et de télécoms
 Diriger un service, une structure
 Mettre à jour une documentation technique
 Établir un cahier des charges
 Réaliser un appel d'offre
Savoir
 Techniques commerciales
 Gestion budgétaire
 Urbanisation des systèmes d'information
 Management
 Audit interne
 Techniques de planification
 Réglementation sur la protection des données à caractère personnel
 Règles de sécurité Informatique et Télécoms
 Protocoles et normes télécoms, normes qualité
 Techniques d'animation d'équipe
 Gestion de projet
 Technologies informatiques
 Code des marchés publics
 Procédures d'appels d'offres 1
_____________________________________________________________
1. https://www.oriane.info/metier/chef-de-projet-web/380

3. Webmaster
Webmaster est responsable du développement et de l’entretien du site Internet au
sein d’une entreprise ou d’une organisation. Vous évoluez dans un monde de banques de
données, de serveurs, de sites Internet, de réseaux… Vous êtes également en charge de
la programmation des applications web. En cas de problèmes techniques liés au site
Internet, c’est à vous de les résoudre. Vous avez une connaissance approfondie des
technologies web (comme HTML, Flash…), Javascript, VB script, Actionscript ou
ASP.NET.
En fonction de la taille de l’entreprise, les tâches du webmaster diffèrent. Dans de plus
petites entreprises, il porte la triple casquette de rédacteur, webdesigner et développeur.
Dans de plus grandes entreprises, il fait souvent partie d’une équipe de webdesigners.
Un webmaster travaille la plupart du temps au bureau. Parfois il participe à des
séminaires, des congrès ou des formations. Cela ne vous pose pas de problème de passer
toute votre journée derrière un ordinateur.
Pour les webmasters, un bachelor ou un master en informatique est demandé. Il
n’existe pas de formation spécifique, mais l’auto-apprentissage et les formations que vous
suivez au sein de votre entreprise vous permettent d’acquérir de l’expérience en tant que
webmaster 1
.
Savoir-faire
 Connaissance solide de l'environnement informatique dans lequel il est amené
à travailler.
 Familiarisation avec les aspects techniques et visuels des produits et services
en ligne dont il s'occupe
 Planification et gestion de projet
 Sauvegarde, restauration et exploitation de données
 Connaissance des réseaux, de la sécurité Web et des systèmes d’exploitation
serveurs
 Connaissances des « standards » du web : HTML, CSS, XML, Javascript,
ASP, PHP, Java, etc.
 Connaissance de l’anglais
________________________________________________________________________________
1. https://www.jobat.be/fr/articles/que-fait-un-webmaster/

 Connaissance des systèmes de gestion de base de données
 Connaissance du langage d’exploitation de bases de données SQL
 Connaissance des langages de programmation web comme ASP.net, PHP,
Java, etc.
 Connaissance des logiciels de traitement de l’image
Qualités requises
 Créativité
 Bonne connaissance des réseaux et gestion des systèmes
 Flexibilité
 Résistance au stress
 Esprit d’équipe
 Connaissance des technologies web (HTML, Flash...)
 Connaissance de Javascript, VB script, Actionscript ou ASP.NET
4. Ergonome
L’ergonome travaille à la prévention des accidents et à l'amélioration des conditions
de travail dans l'entreprise.
Il va s'attacher à étudier les relations entre l’homme et ses moyens, méthodes et
milieux de travail. Son objectif est d’élaborer des propositions pour aboutir à une meilleure
adaptation du milieu de travail à l’homme, et ce sans négliger son milieu de vie en général.
Qualités requises
 Observateur : Une part importante du temps de l'ergonome est passée à
observer les travailleurs. C'est ainsi qu'il obtient la plupart de ses informations.
Curiosité et écoute sont indispensables.

 Concret : L’ergonome doit faire preuve d'un bon esprit d'analyse pour tirer le
meilleur parti de ses observations.
 Méthodique : L'ergonome est très organisé. Il doit à la fois gérer le personnel,
la direction, le montage et le coût financier des opérations.
Savoir-faire
 Analyser les besoins du client
 Définir les objectifs et le cadre de l'intervention
 Préconiser des améliorations en matière d'organisation, de gestion, de
procédures
 Définir les modalités de mise en œuvre des solutions retenues
 Concevoir des indicateurs
 Accompagner le client dans la mise en œuvre des solutions retenues
 Actualiser la documentation professionnelle et réglementaire
 Définir des axes prioritaires de développement commercial
 Conseiller une structure dans la gestion de son activité
 Aménager des postes et des conditions de travail
 Apporter des conseils sur le développement durable en entreprise
 Intervenir en recherche, innovation et prospective
 Réaliser des études d'organisation et d'évolution de systèmes d'information et
assister la maîtrise d'ouvrage
 Mettre en place une démarche qualité
 Évaluer des risques professionnels
 Préconiser des actions de prévention des risques
 Négocier une prestation
 Contractualiser une prestation
 Réaliser un audit
 Logiciels de gestion de base de données
 Outils bureautiques

 Techniques de médiation
 Techniques commerciales
 Méthodes d'analyse (systémique, fonctionnelle, de risques, ...)
 Sociologie des organisations
 Dispositifs d'assurance-qualité
Savoir
 Logiciels de gestion de base de données
 Outils bureautiques
 Techniques de médiation
 Méthodes d'analyse (systémique, fonctionnelle, de risques, ...)
 Sociologie des organisations
 Dispositifs d'assurance-qualité
 Conduite du changement
 Stratégie d'entreprise
 Démarche d'amélioration continue
 Gestion administrative
 Caractéristiques de la chaîne logistique (Supply Chain)
 Gestion de l'information stratégique
 Intelligence économique
 Management de la qualité
 Management de projet
 Protection des biens, des personnes
 Techniques de planification
 Qualité, Hygiène, Sécurité et Environnement (QHSE)
 Droit commercial
 Législation sociale
 Ergonomie

 Gestion des Ressources Humaines
 Analyse des risques
 Dispositifs d'agréments et certification
 Audit interne 1
5. Graphiste
Le graphiste imagine l'identité visuelle et les visuels d'un document avant de le mettre
en forme.
Le graphiste est chargé de concevoir et réaliser une image, un ensemble visuel, avec
pour objectif de représenter une idée, un produit ou une marque et de participer ainsi à
l’identité de l’entreprise ou d’un projet. Une fois qu’il a pris connaissance du message à
faire passer, la première étape de son travail consiste en l'élaboration des ébauches, de
croquis, qui permettront d'illustrer les idées du commanditaire. Pour cela, il utilise donc le
dessin, les couleurs, la typographie afin de créer un visuel cohérent et accrocheur. Il
conçoit ainsi des logos, du matériel promotionnel (affiches, flyers, cartes de visite, etc.),
des couvertures d’ouvrages ou du packaging. Il peut aussi réaliser de la mise en page ou
la charte graphique d’un site internet ou d’un logiciel, par exemple. Il travaille aussi bien
avec un crayon qu’avec une souris d’ordinateur. Une fois que le commanditaire du projet
est satisfait du travail du graphiste, ce dernier peut être amené à assurer le suivi de la
production (fabrication, impression)
1
.
Qualités requises
 Créatif : La maîtrise des outils techniques n'est rien sans une grande faculté
d'imagination.
 Curieux : Le graphiste s'intéresse à toutes les formes de cultures et de
créations. Il est capable de se réapproprier idées et tendances sans les copier.
 Souple : Si ses créations ne plaisent pas au client ou au directeur artistique, il
doit mettre son amour propre de côté et les retravailler jusqu'à ce qu'elles
soient acceptées.
_______________________________________________________________________________
1. http://metiers.siep.be/metier/graphiste/

Savoir-faire
 Traduire un concept ou un script en représentation visuelle
 Réaliser des éléments graphiques de composition à l'aide d'outils graphiques
informatiques
 Traiter des images numériques (colorimétrie, cadrage etc.)
 Concevoir la mise en page et enrichir le document (intégration texte, image,
correction,...) selon les règles typographiques et la charte graphique
 Modéliser des éléments graphiques
 Définir la composition d'éléments graphiques
 Animer les éléments d'une image (restitution des mouvements image par
image, définition des trajectoires)
 Contrôler la conformité de réalisation d'un projet
 Déterminer des actions correctives
 Réaliser les éléments graphiques et visuels en vue de produire une affiche
 Réaliser les éléments graphiques et visuels en vue de produire un Cd-rom
 Réaliser les éléments graphiques et visuels en vue de produire un
conditionnement, emballage
 Réaliser les éléments graphiques et visuels en vue de produire un logotype
 Réaliser un panneau d'exposition, présentoir, stand
 Concevoir une plaquette ou un dépliant publicitaire
 Concevoir une signalétique
Savoir
 Technologies de l'accessibilité numérique
 Techniques de gestion de réseaux prépresse
 Techniques de séparation Cyan Magenta Jaune Noir
 Techniques de dessin
 Colorimétrie

 Typographie
 Chaîne graphique
 Procédés et contraintes d'impression
 Normes qualité
 Règles de sécurisation de fichiers informatiques
 Langages de programmation informatique
 Logiciels d'image de synthèse
 Logiciels d'édition multimédia
 Logiciel de montage photo
 Logiciels de création vidéo
 Publication Assistée par Ordinateur (PAO) 1
6. Web Designer
Web Designer est responsable de l'aspect graphique d'un site web, le webdesigner
conçoit l'identité visuelle d'un site, et ses déclinaisons : logos, pictogrammes, choix des
couleurs, illustrations, etc.
Le webdesigner crée, gère et met à jour un site internet pour des entreprises ou des
institutions diverses. Son rôle consiste à mettre en page un site tout en le rendant attractif.
Outre une parfaite connaissance des techniques et outils à utiliser, il se doit également de
bien comprendre les objectifs (commerciaux) du client et de respecter dans les limites du
possible ses directives. Il se renseigne donc bien sur le produit, la clientèle et l'entreprise
en question afin de créer un site qui corresponde à l'image de cette dernière.
Concrètement, il définit le visuel de l'interface d'une page web et son comportement lors
d'une interaction avec un internaute. Il va configurer l'ensemble de la mise en page d'un
site en alliant esthétisme et possibilités techniques. C'est lui qui choisit les couleurs et le
design et qui établit un plan précis de l'arborescence des pages 1
.
_______________________________________________________________________________
1. http://metiers.siep.be/metier/webdesigner/

Qualités requises
 Créatif : A chaque site, sa patte graphique. Le webdesigner doit imaginer une
identité visuelle nouvelle à chaque création. Son imagination doit être fertile !
 Curieux : Il doit se tenir informé des avancés technologiques, des évolutions
graphiques, et mettre à jour ses connaissances pour toujours être à la pointe
des attentes.
Savoir-faire
informatiques
correction, ...) selon les règles typographiques et la charte graphique
 Réaliser le design d'un site web
 Utiliser des outils de traitement ou d'intégration en images
 Utiliser des outils de traitement ou d'intégration en son
 Utiliser des outils de traitement ou d'intégration en textes
 Utiliser des outils de traitement ou d'intégration en vidéo
 Concevoir l'arborescence d'un site web
 Concevoir l'ergonomie de la navigation sur un site web
 Définir l'identité sonore d'un site web
 Définir l'identité visuelle d'un site web
 Définir les contenus et rubriques d'un site web

Savoir
 Techniques de gestion de réseaux prépresse
 Techniques de séparation Cyan Magenta Jaune Noir
 Techniques de dessin
 Colorimétrie
 Typographie
 Chaîne graphique
 Procédés et contraintes d'impression
 Normes qualité
 Règles de sécurisation de fichiers informatiques
 Logiciels d'image de synthèse
 Logiciels d'édition multimédia
 Logiciel de montage photo
 Logiciels de création vidéo
 Publication Assistée par Ordinateur (PAO) 1
7. Web Developer
Le développeur web s’occupe de la partie technique des sites Internet. A la demande
d’un client ou d’une entreprise et sur base d’un cahier des charges, il conçoit des sites sur
mesure ou adapte des solutions techniques existantes. Spécialiste des langages
informatiques, il prend en charge l’ensemble des fonctionnalités du site, son architecture,
l’accès aux données ainsi que l’écriture des lignes de codes contenant du texte, du son et
des images
2
.
_______________________________________________________________________________
1. https://oriane.info/metier/web-designer/266
2. http://metiers.siep.be/metier/developpeur-developpeuse-web/

Pour certains projets, il arrive que les délais de lancement soient très courts et que
des arrangements de dernière minute apparaissent. Le développeur web doit donc être
rapide et réactif. Avant de mettre le site en ligne, il réalise une série de tests pour s’assurer
du bon fonctionnement du système. Il rédige les manuels notices techniques d’installation
et d’exploitation pour les utilisateurs ou les forme directement à l’emploi des nouvelles
fonctionnalités.
Perçu comme étant le seul à maîtriser parfaitement les contraintes techniques, le
développeur assure également la maintenance et les développements ultérieurs du site.
Dès qu’un problème technique survient, il le corrige. Les technologies évoluant très vite
dans ce domaine, ce professionnel doit actualiser et compléter sans cesse ses
connaissances en langages de programmation, logiciels, et matériels 1
.
Qualités requises
 Capacité d’analyse
 Polyvalence
 Esprit de synthèse et logique
 Organisation
 Curiosité
 Patience
 Capacité à travailler en équipe
Savoir-faire
 Identifier les besoins du client
 Analyser le cahier des charges techniques
 Planifier et mettre en oeuvre le développement
 Créer et développer les programmes et applications informatiques
 Rédiger les lignes de codes informatiques
 Connaissance des langages de programmation et des techniques web
 Élaborer et rédiger des supports techniques pour les utilisateurs
 Assurer le support technique
 S’informer des nouveautés technologiques

 Connaitre les normes et les procédures de sécurité informatique
 Pratiquer couramment l’anglais informatique et technique 1
Savoir
 Algorithmique
 Protocoles et normes télécoms
 Systèmes d'exploitation informatique
 Règles de sécurité Informatique et Télécoms
 Gestion de configuration
 Modélisation informatique
 Architecture d'applications
 Architecture des systèmes d'information
 Programmation informatique
 Programmation logicielle 2
8. Intégrateur Web
L'intégrateur web traduit en langage informatique les maquettes graphiques d'un site
web
3
.
Sur base de maquettes fournies par l'équipe graphique, l'intégrateur web est chargé
de produire et de traduire en langage informatique (HTML, CSS) les différents éléments
(textes, images, sons, vidéos) qui vont composer le site Internet. Il va ainsi monter les
gabarits des pages types disponibles sur le futur site ex. : la home page, une page article,
une page contact, etc.). Ensuite, il les fournira au développeur qui se chargera d'y intégrer
les fonctionnalités du côté du serveur du site 4
.
_______________________________________________________________________________
1. http://metiers.siep.be/metier/developpeur-developpeuse-web/
2. https://oriane.info/metier/developpeur/415
3. https://oriane.info/metier/integrateur-web/272
4. http://metiers.siep.be/metier/integrateur-integratrice-web/

Généralement, l'intégrateur web est associé à la phase de réflexion technique qui
précède le début du développement.
A l'écoute des développeurs et des infographistes, il n'hésite pas à apporter son
assistance au cours du développement, en les conseillant en matière de format, de taille
de fichiers, de compression, etc.
Grâce à son expertise, il participe également à la qualité globale du site (parfaite
qualité visuelle et auditive) et au respect des normes d’accessibilité, d'ergonomie et de
référencement. Il veille à ce que les pages web créées soient compatibles entre les
différents navigateurs 1
.
Qualités requises
 Technique : L'intégrateur web maîtrise langages et technologies de
publication sur le web : HTML, JavaScript, Ajax, Sql, CMS, éditeur de code,
etc.
 Rigoureux : L'intégration est une étape décisive dans la vie d'un projet web.
L'intégrateur web doit être rigoureux, organisé et systématique dans
l'intégration des différents éléments. Il a le sens du détail.
Savoir-faire
informatiques
correction, ...) selon les règles typographiques et la charte graphique
 Réaliser le design d'un site web
 Utiliser des outils de traitement ou d'intégration en image
_______________________________________________________________________________
1. http://metiers.siep.be/metier/integrateur-integratrice-web/

 Utiliser des outils de traitement ou d'intégration en son
 Utiliser des outils de traitement ou d'intégration en textes
 Utiliser des outils de traitement ou d'intégration en vidéo
 Concevoir l'arborescence d'un site web
 Concevoir l'ergonomie de la navigation sur un site web
 Définir l'identité sonore d'un site web
 Définir l'identité visuelle d'un site web
 Définir les contenus et rubriques d'un site web 1
_______________________________________________________________________________
1. https://oriane.info/metier/integrateur-web/272

C. Standardisation Web
1. Quel est l'organisme en charge des normalisations Web ?
Crée en 1994, le World Wide Web Consortium (W3C) est un organisme de «
normalisation » dédié à la mise en place de standards afin d’assurer la pérennité et
la compatibilité des différents formats du web.
Le W3C agit à l’échelle internationale, en « inventant et en promouvant des langages
et des protocoles universels, qui garantissent l’interopérabilité et une évolution homogène,
décentralisée et standardisée du Web », selon les propos de l’un ses membres.
C’est un organisme à but non lucratif et qu’il ne joue pas un rôle législatif mais
uniquement consultatif.
Le Consortium est piloté par 3 organismes :
 le Laboratoire d’Informatique et d’Intelligence Artificielle du MIT (États-
Unis),
 l’Université de Keio (Japon),
 l’Institut National de Recherche en Informatique et en
Automatique (France).
2. Quels sont ses missions ?
Ainsi, l’un de ses principaux travaux est la mise au point de standards et de
spécifications techniques du Web.
Ces derniers sont publiés sous la forme de recommandations consultables directement
sur le site du W3C.
Pour simplifier, voici ses principales motivations :
 Un Web accessible
Rendre accessible à tous, cette source infinie d’information qu’est internet, que
nous utilisions un simple navigateur Web, un synthétiseur vocal, un affichage
braille ou encore un téléphone mobile.
 Un Web universel
Un modèle stable et homogène, grâce auquel cette source infinie
d’informations soit rendue disponible auprès du plus grand nombre.
 Un Web évolutif
Une conception du Web simple et extensive pour permettre d’intégrer les

futures innovations (par exemple, le Web mobile), Internet et ses nouvelles
technologies étant en constante évolution.
 Un Web décentralisé
Préserver ce média de tout contrôle de type pyramidal ou hiérarchique.
3. Quels outils met-il à disposition des concepteurs, et à quelle fin ?
Afin de nous aider à développer des sites Web dans le respect des standards, le
W3C met à notre disposition plusieurs outils de validation :
 Validateur HTML : Ce validateur vérifie la validité du balisage des documents
Web au format HTML, XHTML, SMIL, MathML, etc.
 Validateur CSS : Ce validateur vérifie des feuilles de style CSS
 Validateur d’hyperliens : Ce validateur de liens recherche les problèmes
dans les liens, les ancres et les objets référencés dans une page Web, une
feuille de style CSS ou de manière récursive sur un site Web complet.
 Feed Validation Service : Ce validateur vérifie la syntaxe de Atom ou RSS.
 Validateur W3C Multipages : Ce validateur permet de valider notre site Web
en entier et d’un seul coup
1
.
_______________________________________________________________________________
1. http://blog.nethik.fr/2009/08/le-w3c-ou-lorganisme-de-normalisation-du-web/

Environnement et technologies web

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (10)

Similaire à Environnement et technologies web

Similaire à Environnement et technologies web (20)

Environnement et technologies web