Introduction au Développement Web

Le WEB

CrØation de sites web

Lancement d’un site

Introduction

Navigateur web

Gr(cid:226)ce aux navigateurs, on peut :

• lancer des recherches,

• Øchanger des e-mails,

• faire des achats,

• consulter son compte en banque,

• lire l’actualitØ,

• visionner des vidØos, images,...

⇒ R(cid:244)le :Analyser le code des pages web et en produire un rØsultat

visuel, facile (cid:224) lire pour l’utilisateur.

B.SALEM Y.

Introduction au dØveloppement Web

14 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Introduction

Navigateur web

Navigateurs graphiques :

Internet Explorer (Windows),

MozillaFirefox(Windows, Mac et

Linux),

Google Chrome (Windows, Mac et

Linux),

Opera(Windows, Mac et Linux),

Konqueror(Linux).

Navigateurs textuels :

Links,

B.SALEM Y.

Introduction au dØveloppement Web

15 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Introduction

Navigateur web

Figure: Fonctionnement d’un navigateur web

B.SALEM Y.

Introduction au dØveloppement Web

16 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Evolution du Web

B.SALEM Y.

Figure: L’Øvolution du web

Introduction au dØveloppement Web

17 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Evolution du Web

Figure: L’Øvolution du web

B.SALEM Y.

Introduction au dØveloppement Web

18 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Evolution du Web

Le Web 1.0

AppelØ Web Traditionnel,

Un web statique,

CentrØ sur la distribution d’informations,

CaractØrisØ par des sites orientØs produits (premiers sites

d’e-commerce.

B.SALEM Y.

Introduction au dØveloppement Web

19 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Evolution du Web

Le Web 2.0

AppelØ Web Social,

Partage et Øchange d’informations et de contenus (textes,

vidØos, images ou autres),

Emergence des rØseaux sociaux, des smartphones et des blogs.

donner le contr(cid:244)le de l’information aux utilisateurs

⇒ NØcessite plus de puissance de calcul (pages dynamiques)et plus

d’espace de stockage (contenus envoyØs par les utilisateurs)

B.SALEM Y.

Introduction au dØveloppement Web

20 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Evolution du Web

Le Web 3.0

AppelØ Web SØmantique,

Vise (cid:224) organiser la masse d’informations disponibles en

fonction du contexte et des besoins de chaque utilisateuren

tenant compte de sa localisation, de ses prØfØrences, etc,

donner sens aux donnØes,

Plus portable,

Assembler monde rØel et monde virtuel

nØcessite plus d’espace de stockage (contenus envoyØs par les

utilisateurs)

⇒ Il rØpond aux besoins des utilisateurs mobiles, toujours

connectØs (cid:224) travers une multitude de supports et d’applications.

B.SALEM Y.

Introduction au dØveloppement Web

21 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Evolution du Web

Le Web 4.0

AppelØ Web Intelligent,

Vise (cid:224) immerger l’individu dans un environnement (web) de

plus en plus prØgnant,

Plus de personnalisation,

De nombreuses questions :

Protection de la vie privØe,

Contr(cid:244)le des donnØes

B.SALEM Y.

Introduction au dØveloppement Web

22 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Usage du Web

Consultation simple (web 1.0)

Navigation

Recherche d’informations

Divertissement

TV, radio, musique, vidØo en ligne,

Informations,

Jeu,...

Communication

Asynchrone (Webmail),

Synchrone (Web chat, WebconfØrence),

Web 2.0

Travail collaboratif : partage, Ødition de documents sur des

intranets,

Sites participatif (blogs),

RØseaux sociaux.

B.SALEM Y.

Introduction au dØveloppement Web

23 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Usage du Web

Consommation de services

Sites marchands, enchŁres,

Autres services en ligne : banque, administration...

B.SALEM Y.

Introduction au dØveloppement Web

24 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Le fonctionnement du web

ModŁle client/serveur :Communication entre un serveur (HTTP)

et un client (navigateur)

Figure: Fonctionnement du web

B.SALEM Y.

Introduction au dØveloppement Web

25 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Le fonctionnement du web

Les mØcanismes de base

URL (Uniform Resource Locator)

Permet d’identi(cid:28)er de maniŁre unique une ressource sur le

Web.

HTTP (Hypertext Transfer Protocol)

le protocole de transport utilisØ sur le Web pour la

communication de ressources hypertexte entre le client et le

serveur

HTML (Hypertext Markup Language)

Un langage de balises qui permet de prØciser la structure du

texte, sa mise en forme et de dØ(cid:28)nir des liens hypertextes

B.SALEM Y.

Introduction au dØveloppement Web

26 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Le fonctionnement du web

C(cid:244)tØ Serveur

C(cid:244)tØ Cient

Serveur Web

Client Web

attend les requŒtes HTTP et y

rØpond

fournir des ressources(Statique -

Dynamique)

Machine Serveur

identi(cid:28) les serveurs sur Internet

demande les ressources aux

serveurs

a(cid:30)chent les ressources aux

utilisateurs

hØberge le programme serveur

Machine Client

environnement contr(cid:244)lØ

dimensionnØe en fonction de la

charge attendue

environnement variable

AccŁs en "Front O(cid:30)ce"

B.SALEM Y.

Introduction au dØveloppement Web

27 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Le fonctionnement du web

C(cid:244)tØ Serveur

C(cid:244)tØ Cient

Utilisateurs

Utilisateurs

Webmaster : administration

utilisateurs (cid:28)naux

Web designer : conception et

rØalisation des contenus

objectifs : utiliser le service

o(cid:27)ert par l(cid:146)application Web

B.SALEM Y.

Introduction au dØveloppement Web

28 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Le fonctionnement du web

Web Statique

Figure: Fonctionnement d’un wen statique

B.SALEM Y.

Introduction au dØveloppement Web

29 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Le fonctionnement du web

Web Dynamique

Figure: Fonctionnement d’un web dynamique

B.SALEM Y.

Introduction au dØveloppement Web

30 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

1

Introduction

2 Le WEB

3 CrØation de sites web

4 Lancement d’un site

B.SALEM Y.

Introduction au dØveloppement Web

31 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Pour commencer...

Se poser les bonnes questions

B.SALEM Y.

Introduction au dØveloppement Web

32 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Pour commencer...

Comment (cid:231)a marche ?

B.SALEM Y.

Introduction au dØveloppement Web

33 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Etapes de crØation d’un site web

Le cycle de vie d’un projet web

"Les principles Øtapes de la rØalisation du projet"

B.SALEM Y.

Introduction au dØveloppement Web

34 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Etapes de crØation d’un site web

La spØci(cid:28)cation

Collecte d’information,

DØ(cid:28)nition des cibles,

Analyse des sites concurrents,

DØ(cid:28)nition des objectifs gØnØraux/valeur ajoutØe,

Identi(cid:28)cation des contraintes incontournables(SØcuritØ des

informations,...),

Choix des ØlØments graphiques(logo, images,

couleurs,...)(charte graphique),

Identi(cid:28)cation des solutions de dØveloppement,

DØtermination de la date prØvisionnelle du lancement du site.

⇒ RØdaction et validation du rapport de conception/plan directeur.

B.SALEM Y.

Introduction au dØveloppement Web

35 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Etapes de crØation d’un site web

La spØci(cid:28)cation

Charte graphique et ergonomie

La charte graphique d’un site web = identitØ visuelle d’un site web

C’est l’ensemble des symboles et des rŁgles qui dØ(cid:28)nissent l’identitØ

graphique d’un site web.

L’objectif d’une charte graphique

avoir une cohØrence graphique quelle que soit la page du site

web, et quel que soit le support de communication utilisØ

faciliter la navigation et la lecture gr(cid:226)ce (cid:224) l(cid:146)utilisation de

repŁres visuels constants.

B.SALEM Y.

Introduction au dØveloppement Web

36 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Etapes de crØation d’un site web

Les principaux ØlØments de la charte graphique d’un site web.

Couleurs : RØfØrences RVB - HexadØcimal des di(cid:27)Ørentes

couleurs utilisØs. Le choix des couleurs doit Œtre limitØ pour

permettre une meilleure mØmorisation et une distinction rapide.

Typographie : Liste de toutes les polices utilisØes, voire de la

taille et des couleurs pour chaque niveau de titre. Il est

gØnØralement conseillØ de ne pas dØpasser 2 polices.

Logo : DØ(cid:28)nir les conditions de son utilisation : ses

proportions, sa taille minimale et son positionnement par

rapport aux autres ØlØments (texte, titres, marges, etc.).

Ic(cid:244)nes : Utiliser des ic(cid:244)nes de sotre (cid:224) avoir une cohØrence

graphique entre eux.

Boutons : Deux ou trois dØclinaisons du bouton sont

gØnØralement utiles : un bouton texte simple, un bouton texte

+ ic(cid:244)ne, voire un bouton spØci(cid:28)que.

B.SALEM Y.

Introduction au dØveloppement Web

37 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Etapes de crØation d’un site web

La plani(cid:28)cation

Elaboration du budget,

Plani(cid:28)cation du travail : calendrier,

DØ(cid:28)nition des responsabilitØs des intervenants internes et

externe,

(cid:201)tude de faisabilitØ en fonction des ressources existantes et/ou

libØrables.

⇒ DØcision de rØaliser, d’ajourner ou d’abandonner le projet.

⇒ Choix d’un mode de dØveloppement (interne, externe,...).

B.SALEM Y.

Introduction au dØveloppement Web

38 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Etapes de crØation d’un site web

La rØalisation

Structuration du site,

Conception graphique,

DØveloppement.

B.SALEM Y.

Introduction au dØveloppement Web

39 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Etapes de crØation d’un site web

La rØalisation

Structuration du site :

• Organisation et hiØrarchisation des informations,
• Choix des conventions de nommage,
• Choix de la navigation.

Conception graphique,

DØveloppement.

B.SALEM Y.

Introduction au dØveloppement Web

40 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Etapes de crØation d’un site web

La rØalisation

Structuration du site,

Conception graphique :

• CrØation des Ølements graphiques nØcessaires

(logo, icones,animations...),

• Conception de la maquette du site suivant la

charte graphique spØci(cid:28)Øe.

DØveloppement.

B.SALEM Y.

Introduction au dØveloppement Web

41 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Etapes de crØation d’un site web

La rØalisation

Structuration du site,

Conception graphique,

DØveloppement :

• CrØation de la base de donnØes,
• CrØation des pages constituant le site,
• Alimentation des pages,
• IntØgration des dØveloppements back-o(cid:30)ce,
• Validation et tests (tests fonctionnels, tests de

charge)

B.SALEM Y.

Introduction au dØveloppement Web

42 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Etapes de crØation d’un site web

Le Lancement et La maintenance

Le lancement

Promotion,

HØbergement du site,

RØfØrencement.

La maintenance et le suivi

Mise (cid:224) jour,

Suivi des performances,

(cid:201)volution du service.

B.SALEM Y.

Introduction au dØveloppement Web

43 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Les outils de dØveoppement web

Le dØveloppement d’un site web couvre les points suivants :

La structuration des pages web,

La mise en forme et la dØcoration des pages,

La crØation et la gestion de la base de donnØes.

B.SALEM Y.

Introduction au dØveloppement Web

44 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Les outils de dØveoppement web

Les Øditeurs de crØation de pages web

Les Øditeurs visuels Gratuits :

WebMatrix

Kompozer

B.SALEM Y.

Introduction au dØveloppement Web

45 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Les outils de dØveoppement web

Les Øditeurs de crØation des pages web

Les Øditeurs visuels Payants :

Adobe Dreamweaver

Microsoft Visual Studio

B.SALEM Y.

Introduction au dØveloppement Web

46 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Les outils de dØveoppement web

Les Øditeurs de crØation des pages web

Les Øditeurs textuels :

WebMatrix

NotePad++

B.SALEM Y.

Introduction au dØveloppement Web

47 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Les outils de dØveoppement web

Les langages de dØveloppement web :

Langages c(cid:244)tØ client : Ce sont des petits programmes qui

s’exØcutent sur la machine du visiteur, appelØ « le client ».

Langages c(cid:244)tØ serveur : Ils permettent de « programmer » la

gØnØration des pages web de votre site dynamique.

B.SALEM Y.

Introduction au dØveloppement Web

48 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Les outils de dØveoppement web

Les langages de dØveloppement web :

Langages c(cid:244)tØ client : Ce sont des petits programmes qui

s’exØcutent sur la machine du visiteur, appelØ « le client ».

• HTML : (HyperText Markup Language)Langage

de programmation web permettant

principalement la structuration des pages web.

• CSS : (Cascading Style Sheets) Langage de

programmation permettant la personnalisation

de la mise en forme des page web.

• JavaScript : Langage de programmation de

scripts principalement employØ dans les pages

web interactives.

Langages c(cid:244)tØ serveur : Ils permettent de « programmer » la

gØnØration des pages web de votre site dynamique.

B.SALEM Y.

Introduction au dØveloppement Web

49 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Les outils de dØveoppement web

Les langages de dØveloppement web :

Langages c(cid:244)tØ client : Ce sont des petits programmes qui

s’exØcutent sur la machine du visiteur, appelØ « le client ».

Langages c(cid:244)tØ serveur : Ils permettent de « programmer » la

gØnØration des pages web de votre site dynamique.

• PHP : (Hypertext Preprocessor) Langage de

programmation web permettant essentiellement

la crØation d’appalication dynamique.

• ASP.Net : (Active Server Page) Ensemble de

technologies de programmation Web propriØtaire

crØØ par l’entreprise Microsoft. Il est utilisØ pour

crØer des sites Web dynamiques, des applications

Web ou des services web XML.

• JSP : ( JavaServer Pages) Technique basØe sur

Java qui permet aux dØveloppeurs de crØer

dynamiquement des pages web.

Introduction au dØveloppement Web

50 / 63

B.SALEM Y.

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Les outils de dØveoppement web

Outils de gestion de base de donnØes

SGBD

Un SystŁme de Gestion de Base de DonnØes (SGBD) peut Œtre

dØ(cid:28)ni comme un logiciel prenant en charge la structuration, le

stockage, la mise (cid:224) jour et la maintenance des donnØes.

B.SALEM Y.

Introduction au dØveloppement Web

51 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Les outils de dØveoppement web

Le SGBD MySql : Un SGBD gratuit. C’est l’outil le plus

utilisØ dans le monde.

Le SGBD Oracle : Un SGBD dØveloppØ et commercialisØ par

la sociØtØ Oracle Corporation.

Le SGBD SQL Server : Un SGBD dØveloppØ et

commercialisØ de Microsoft.

B.SALEM Y.

Introduction au dØveloppement Web

52 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

1

Introduction

2 Le WEB

3 CrØation de sites web

4 Lancement d’un site

B.SALEM Y.

Introduction au dØveloppement Web

53 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

HØbergement

DØ(cid:28)nition

C’est le procØdØ qui consiste (cid:224) mettre en ligne (sur Internet) et de

fa(cid:231)on permanente (24/24 et 7/7) un site web sur un ordinateur

particulier appelØ "serveur".

Le serveur stocke toute les donnØes du site destinØes (cid:224) la

publication sur Internet et permettre aux utilisateurs d’y accØder.

B.SALEM Y.

Introduction au dØveloppement Web

54 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

HØbergement

L’hØbergeur peut s’occuper d’un site (cid:224) divers niveaux :

Gestion du nom de domaine (Ex. www.monsite.tn).

Gestion des emails :

• Stockage des emails,
• Redirection des emails,
• Interfaces d’accŁs aux emails,...

Mise (cid:224) disposition d’un serveur :

• Espace de stockage de (cid:28)chiers,
• Architecture technique (frameworks, logiciels,...).

B.SALEM Y.

Introduction au dØveloppement Web

55 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

HØbergement

L’hØbergeur s’engage (cid:224) :

Tra(cid:28)c : Fournir une bande passante minimale,

DisponibilitØ : Le site est "en ligne" 24/24 et 7/7,

FiabilitØ : Peu de failles de sØcuritØ (virus,...).

B.SALEM Y.

Introduction au dØveloppement Web

56 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

RØfØrencement

DØ(cid:28)nition

Le rØfØrencement web est l’action qui permet de positionner un site

web dans le classement d’une requŒte dans un moteur de recherche.

Le classement dØpend fortement des mots clØs utilisØs pour

rØfØrencer le site.

B.SALEM Y.

Introduction au dØveloppement Web

57 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

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).

B.SALEM Y.

Introduction au dØveloppement Web

58 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

RØfØrencement

B.SALEM Y.

Introduction au dØveloppement Web

59 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

RØfØrencement

Boutons de partage

Boutons de prØsence

B.SALEM Y.

Introduction au dØveloppement Web

60 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

RØfØrencement

Type

Objectifs

RØsultat

Etre visible dans les moteurs de

recherche pour attirer un tra(cid:28)c

pertienent.

Optimiser le contenu pour remonter

dans les premiŁres rØsultats a(cid:30)chØs.

Attirer du tra(cid:28)c ciblØ et quali(cid:28)Ø.

Se positionner en haut ou (cid:224) droite des

rØsultats de recherche des moteur en

tant que publicitØ payante

Court Terme

Moyen Terme

SEA

SEO

B.SALEM Y.

Introduction au dØveloppement Web

61 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

RØfØrencement

Type

SMO

Objectifs

Attirer plus de tra(cid:28)c.

RØsultat

Etre visible sur les rØseaux sociaux.

Long Terme

B.SALEM Y.

Introduction au dØveloppement Web

62 / 63

Introduction

Le WEB

CrØation de sites web

Lancement d’un site

Gestion

Suivre l’Øvolution du site

Enrichir son contenu

Corriger les erreurs

VØri(cid:28)er l’audiance du site

• La provenance des visiteurs (pays, site rØfØrant,

moteur de recherche)

• Les pages consultØes, pendant combien de temps

et (cid:224) quelle heure.

• Le nombre de visites, visiteurs et pages vues.

B.SALEM Y.

Introduction au dØveloppement Web

63 / 63