Introduction au Développement Web

Ce cours d’introduction au développement web s’adresse aux étudiants et débutants souhaitant comprendre les fondamentaux du Web, ses technologies, ainsi que les étapes de création et de lancement d’un site web. Il présente les concepts clés, les outils et les processus indispensables pour concevoir, développer et maintenir un site web.

Le Web et Internet

Internet est un réseau informatique mondial constitué d’un ensemble de réseaux nationaux, régionaux et privés interconnectés par un protocole de communication. Il offre une interface unique à ses utilisateurs. Le terme "Internet" dérive du concept d’"internetting" qui signifie interconnecter des réseaux.

Historique :

• 1960 : Conception du réseau ARPANET pour le département américain de la Défense.
• 1970 : ARPANET s’étend aux universités américaines.
• 1990 : Remplacement d’ARPANET par le réseau Internet.
• 1991 : Apparition du World Wide Web.
• 1992 : Création de l’ISOC pour promouvoir et coordonner les développements sur Internet.
• 1993 : Premier navigateur et explosion d’Internet.
• 2000 : Émergence des technologies côté serveur et des sites web dynamiques.
• 2005 : Apparition du Web 2.0.

Services d’Internet : Internet propose de nombreux services tels que la messagerie électronique, le transfert de fichiers, le Web, les forums, les réseaux sociaux, etc.

Le World Wide Web (WWW)

Inventé par Tim Berners-Lee, le Web est un ensemble de données accessibles via Internet, visualisables et utilisables avec un navigateur web. Ces données sont organisées en pages et sites web.

Distinction :

• Internet : support de communication.
• Web : partie des contenus circulant sur Internet.

Page Web : Un document multimédia composé d’images, vidéos, textes, liens hypertextes, etc. Elle est décrite élément par élément (titres, paragraphes, images) avec un langage de description comme HTML et stockée dans un fichier (.html). Une page web est affichée par un navigateur et localisée sur Internet grâce à une adresse URL.

Site Web : Regroupement de pages web autour d’une thématique commune, reliées entre elles par des liens hypertextes, appartenant à une même entité (organisation, entreprise, particulier). Un site est accessible à partir d’une page d’accueil et d’une URL de base commune, généralement hébergé sur un même serveur. Sa structure est hiérarchique, organisée en arborescence de dossiers et fichiers, permettant des chemins relatifs.

Liens hypertextes : Ils permettent de naviguer d’un site à un autre, composant ainsi la toile mondiale (World Wide Web).

Le navigateur web

Le navigateur est un logiciel qui analyse le code des pages web et produit un rendu visuel lisible par l’utilisateur. Il permet de lancer des recherches, échanger des e-mails, faire des achats, consulter des comptes bancaires, lire l’actualité, visionner des vidéos, etc.

Exemples de navigateurs graphiques : Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Konqueror.

Navigateurs textuels : Links.

Évolution du Web

• Web 1.0 (Web traditionnel) : Web statique centré sur la distribution d’informations, avec des sites orientés produits (premiers sites d’e-commerce).
• Web 2.0 (Web social) : Partage et échange d’informations et contenus (textes, vidéos, images), émergence des réseaux sociaux, smartphones et blogs. Ce web donne le contrôle de l’information aux utilisateurs et nécessite plus de puissance de calcul (pages dynamiques) et d’espace de stockage (contenus utilisateurs).
• Web 3.0 (Web sémantique) : Organisation des informations selon le contexte et les besoins des utilisateurs (localisation, préférences), donnant du sens aux données. Plus portable, il assemble monde réel et virtuel, répond aux besoins des utilisateurs mobiles connectés sur divers supports.
• Web 4.0 (Web intelligent) : Immersion de l’individu dans un environnement web personnalisé et prégnant. Soulève des questions sur la protection de la vie privée et le contrôle des données.

Usage du Web

• Web 1.0 : Consultation simple, navigation, recherche d’informations, divertissement (TV, radio, musique, vidéo en ligne, jeux), communication asynchrone (webmail) et synchrone (web chat, webconférence).
• Web 2.0 : Travail collaboratif (partage, édition de documents), sites participatifs (blogs), réseaux sociaux.
• Consommation de services : Sites marchands, enchères, services en ligne (banque, administration).

Fonctionnement du Web

Le Web fonctionne selon un modèle client/serveur où un serveur HTTP répond aux requêtes d’un client (navigateur).

Les mécanismes de base :

• URL (Uniform Resource Locator) : identifie de manière unique une ressource sur le Web.
• HTTP (Hypertext Transfer Protocol) : protocole de transport utilisé pour la communication entre client et serveur.
• HTML (Hypertext Markup Language) : langage de balises permettant de structurer le texte, sa mise en forme et de définir des liens hypertextes.

Côté serveur : Serveur Web qui attend les requêtes HTTP et y répond en fournissant des ressources (statiques ou dynamiques). Le serveur est une machine dédiée dimensionnée selon la charge attendue.

Côté client : Machine client qui demande les ressources aux serveurs et les affiche aux utilisateurs via un navigateur. L’environnement client est variable et contrôlé par l’utilisateur.

Utilisateurs : Le webmaster administre le site, le web designer conçoit et réalise les contenus, et les utilisateurs finaux utilisent les services proposés.

Web statique et Web dynamique

Web statique : Les pages sont fixes, stockées sur le serveur et envoyées telles quelles au client.

Web dynamique : Les pages sont générées à la demande par le serveur en fonction des interactions utilisateur, souvent via des bases de données et des scripts côté serveur.

Étapes de création d’un site web

Le cycle de vie d’un projet web comprend plusieurs phases clés :

La spécification

• Collecte d’informations.
• Définition des cibles.
• Analyse des sites concurrents.
• Définition des objectifs généraux et de la valeur ajoutée.
• Identification des contraintes incontournables (ex. sécurité des informations).
• Choix des éléments graphiques (logo, images, couleurs) formant la charte graphique.
• Identification des solutions de développement.
• Détermination de la date prévisionnelle de lancement.

Un rapport de conception ou plan directeur est rédigé et validé.

Charte graphique et ergonomie

La charte graphique définit l’identité visuelle du site web, regroupant symboles et règles graphiques.

Objectifs :

• Assurer une cohérence graphique sur toutes les pages et supports.
• Faciliter la navigation et la lecture grâce à des repères visuels constants.

Principaux éléments :

• Couleurs : Références RVB ou hexadécimales, choix limité pour une meilleure mémorisation et distinction rapide.
• Typographie : Liste des polices utilisées, tailles et couleurs pour chaque niveau de titre (2 polices maximum recommandées).
• Logo : Conditions d’utilisation, proportions, taille minimale, positionnement par rapport aux autres éléments.
• Icônes : Utilisation cohérente d’icônes de même style.
• Boutons : Plusieurs déclinaisons (texte simple, texte + icône, bouton spécifique).

La planification

• Élaboration du budget.
• Planification du travail avec un calendrier.
• Définition des responsabilités des intervenants internes et externes.
• Étude de faisabilité selon les ressources disponibles.

Décision de réaliser, ajourner ou abandonner le projet. Choix du mode de développement (interne, externe, etc.).

La réalisation

• Structuration du site : Organisation et hiérarchisation des informations, choix des conventions de nommage, choix de la navigation.
• Conception graphique : Création des éléments graphiques nécessaires (logo, icônes, animations), conception de la maquette selon la charte graphique.
• Développement : Création de la base de données, création et alimentation des pages, intégration des développements back-office, validation et tests fonctionnels et de charge.

Lancement et maintenance

• Lancement : Promotion, hébergement du site, référencement.
• Maintenance et suivi : Mise à jour, suivi des performances, évolution du service.

Outils de développement web

Le développement d’un site web couvre :

• La structuration des pages web.
• La mise en forme et la décoration des pages.
• La création et gestion de la base de données.

Éditeurs de création de pages web

Éditeurs visuels gratuits : WebMatrix, Kompozer.

Éditeurs visuels payants : Adobe Dreamweaver, Microsoft Visual Studio.

Éditeurs textuels : WebMatrix, NotePad++.

Langages de développement web

Langages côté client : Petits programmes s’exécutant sur la machine du visiteur (client).

• HTML : Langage de balisage structurant les pages web.
• CSS : Langage de mise en forme personnalisant l’apparence des pages.
• JavaScript : Langage de scripts pour rendre les pages interactives.

Langages côté serveur : Permettent de programmer la génération dynamique des pages web.

• PHP : Langage de programmation pour applications dynamiques.
• ASP.Net : Technologies Microsoft pour sites dynamiques, applications web et services XML.
• JSP (JavaServer Pages) : Technique basée sur Java pour créer dynamiquement des pages web.

Outils de gestion de base de données

SGBD (Système de Gestion de Base de Données) : Logiciel assurant structuration, stockage, mise à jour et maintenance des données.

Exemples :

• MySQL : SGBD gratuit et très utilisé.
• Oracle : SGBD commercial développé par Oracle Corporation.
• SQL Server : SGBD commercial développé par Microsoft.

Hébergement

Définition : Mise en ligne permanente (24/24, 7/7) d’un site web sur un ordinateur appelé serveur. Le serveur stocke toutes les données du site destinées à la publication et permet aux utilisateurs d’y accéder.

Services de l’hébergeur :

• Gestion du nom de domaine (ex. www.monsite.tn).
• Gestion des emails : stockage, redirection, interfaces d’accès.
• Mise à disposition d’un serveur avec espace de stockage et architecture technique (frameworks, logiciels).

Engagements de l’hébergeur :

• Bande passante minimale pour le trafic.
• Disponibilité du site en ligne 24/24 et 7/7.
• Fiabilité avec peu de failles de sécurité (virus, etc.).

Référencement

Définition : Action visant à positionner un site web dans les résultats d’un moteur de recherche selon les mots-clés utilisés.

Types de référencement :

• SEM : Search Engine Marketing.
• SEO : Search Engine Optimization (référencement naturel).
• SEA : Search Engine Advertising (référencement payant).
• SMO : Social Media Optimization (optimisation des réseaux sociaux).

Objectifs et résultats :

Type	Objectifs	Résultat	Durée
SEO	Être visible dans les moteurs de recherche pour attirer un trafic pertinent.	Optimiser le contenu pour remonter dans les premiers résultats affichés.	Moyen terme
SEA	Se positionner en haut ou à droite des résultats comme publicité payante.	Attirer du trafic ciblé et qualifié.	Court terme
SMO	Attirer plus de trafic via les réseaux sociaux.	Être visible sur les réseaux sociaux.	Long terme

Gestion et suivi d’un site web

Il est important de suivre l’évolution du site, enrichir son contenu et corriger les erreurs. La vérification de l’audience permet d’analyser :

• La provenance des visiteurs (pays, site référant, moteur de recherche).
• Les pages consultées, la durée de consultation et les horaires.
• Le nombre de visites, visiteurs et pages vues.

Glossaire des termes clés

• ARPANET : Premier réseau informatique conçu pour le département américain de la Défense.
• HTML : Langage de balisage structurant les pages web.
• HTTP : Protocole de communication entre client et serveur sur le Web.
• URL : Adresse unique identifiant une ressource sur le Web.
• Web 1.0 : Web statique centré sur la diffusion d’informations.
• Web 2.0 : Web social favorisant le partage et l’interaction.
• Web 3.0 : Web sémantique organisant les données selon le contexte utilisateur.
• Web 4.0 : Web intelligent et personnalisé.
• CMS : Système de gestion de contenu (non explicitement cité mais lié au développement web).
• SGBD : Système de Gestion de Base de Données.
• SEO : Référencement naturel pour améliorer la visibilité dans les moteurs de recherche.
• SEA : Référencement payant via publicité sur les moteurs de recherche.
• SMO : Optimisation de la visibilité sur les réseaux sociaux.
• PHP : Langage de programmation côté serveur pour sites dynamiques.
• JavaScript : Langage de scripts côté client pour rendre les pages interactives.

Points clés à retenir

• Internet est un réseau mondial interconnecté, tandis que le Web est un ensemble de contenus accessibles via Internet.
• La création d’un site web suit un cycle de vie structuré : spécification, planification, réalisation, lancement et maintenance.
• La charte graphique assure une cohérence visuelle et facilite la navigation.
• Le Web évolue du statique (Web 1.0) au social (Web 2.0), puis au sémantique (Web 3.0) et intelligent (Web 4.0).
• Le modèle client/serveur est fondamental pour le fonctionnement du Web.
• Les langages côté client (HTML, CSS, JavaScript) et côté serveur (PHP, ASP.Net, JSP) sont essentiels pour le développement web.
• L’hébergement garantit la disponibilité permanente du site sur Internet.
• Le référencement (SEO, SEA, SMO) est crucial pour la visibilité et le trafic du site.
• Le suivi et la gestion du site permettent son évolution et son adaptation aux besoins des utilisateurs.