Conceptionsitesweb

Conception de projets de sites web – Stefan B.
Bazan
COURS DE CONCEPTION DE SITES WEB
Stefan B. Bazan
Université Saint-Joseph
Université Saint-Joseph de Beyrouth – 2003-2004

Conception de projets de sites web – Stefan B. Bazan
OBJECTIFS DU COURS
- Comprendre le rôle et le fonctionnement d’un site web
- Savoir anticiper la mise en place d’un site web
- Préparer un plan de développement de projet site web
- Maîtriser les concepts de base du web design
- Connaître et utiliser les outils et solutions de développement
- Maîtriser les bases de la création de site avec Dreamweaver

METHODOLOGIE et EVALUATION
Un cours basé sur :
- Des documents à lire
- Des sites Internet de référence
- Des exemples à consulter sur Internet
- Des exercices pratiques en classe et en TPC
- Un projet personnel à réaliser par groupe de 2
- Une évaluation sur la participation et les TPC

BIBLIOGRAPHIE
Un cours conçu à partir des ouvrages suivants :
- Robin Williams : Web design workshop, Peachpit Press

- Frédéric Reiller : Internet au lycée, Magnard
- Betsy Bruce : Dreamweaver, Campus press
- Lisa Schmeiser : Website upgrade and maintenance guide
- Internet marketing
- Internet marketing
- Laudon, Laudon : Essentials of management information systems
- Les conseils de Gerry McGovern, sur New thinking

- Cours de web Ergonomy – CRI, Montréal
- Cours de conception de projet web – CRI, Montréal

PLAN DU COURS
-1 : Connaissances nécessaires de base
-2 : La conception de projet
-3 : Atelier de web design

PARTIE 1 : Les bases
-1 : Le réseau Internet
- Historique et principes
- Fonctionnement
- Services
- Le web ou WWW
-2 : Le site Web
- Fonctions
- Contenus
- Typologies et niveaux

PARTIE 2 : La conception de projet
-1 : La stratégie
- Définition des objectifs

- Définition des besoins
- Établir une stratégie
- Avantages comparatifs
- Analyse (SWOT, utilisateurs, etc.)
-2 : Le cahier des charges
- Processus
- Équipe de développement
- Besoins techniques
- Calendrier et moyens

-3 : L’architecture
- Le contenu et la navigation
- L’ergonomie et l’adaptation culturelle
- La structure de l’information
- La maintenance du site
-4 : Marketing et évaluation
- Principes du marketing Internet

- Solutions
- Méthodes d’évaluation

PARTIE 3 : Atelier de Web design
-1 : Les bases
- Définitions
- Textes et images
- Limitations et normes techniques
- L’animation et l’interactivité
- Les sites dynamiques

PARTIE 3 : Atelier de Web design
-2 : Créer un site avec Dreamweaver
- Un logiciel et ses outils

- Maquettes et plans de sites
- Menus et écrans
- Créer une page web
- Header, body
- Textes, tables
- Images et graphiques
- Créer un site web
- Liens hypertextes : La navigation
- Templates
- Feuilles de style
- Formulaires

Sources d’information
-1 : Le site du cours :
-www.stefanbazan.com/cours/webdesign03/
- Plan du cours
- Documents en format PDF
- Sujets des TPC
- Liens vers des sites à visiter
- Logiciels
-2 : Le e-mail :
- stef@stefanbazan.com

Année 2003-2004
PARTIE 1
Le réseau Internet


Le réseau Internet
Historique et principes
Créé à partir du réseau militaire américain ARPANET dans les 60’s

Réseau de serveurs informatiques interconnectés
Ces serveurs utilisent le protocole TCP/IP
Des clients sont connectés aux serveurs
Cette connexion se fait grâce à un ISP
Principes :
Internet est un outil de communication

Internet n’appartient à personne
Les serveurs et les clients communiquent par requêtes
Chaque client et chaque serveur ont une adresse IP différente
Les serveurs et les clients sont identifiés par leur nom de domaine
(Edu, com, mil, gov, org, net, tv, info, etc. + pays)


Le réseau Internet
Fonctionnement
Pour se connecter à Internet :

- 1 ordinateur, 1 modem, 1 ligne téléphonique analogique
Pour utiliser les services de l’Internet :
- Une connexion, des logiciels
Pour produire des services Internet :
- Une connexion haut débit, un serveur
Principes :
Tout type d’ordinateur peut se connecter à Internet

Internet est un ensemble de services
Un organisme international, le W3C, dirige Internet
Il existe des Internet privés, comme AOL
Ne pas confondre Internet, intranet et extranet


Le réseau Internet
Services
Internet est un ensemble de services :
- Le courrier électronique (Protocole SMTP)

- Les serveurs de fichiers (FTP, GOPHER, WAIS)
- Les news (Protocole NNTP)
- Le Telnet
- Le web ou WWW (Protocole HTTP)
Chaque service nécessite des logiciels différents :
E-mail : MS Outlook, eudora, netscape Mail

Web : MS Explorer, Netscape, Mozilla, Opéra
Certains logiciels combinent plusieurs services


Le réseau Internet
Le WWW
Le WWW est un service de l’Internet

Créé en 1993 par Tim Berner Lee au CERN de Genève, Suisse
Utilise le protocole http (Hypertext transmission protocol)
Basé sur le principe de l’hypertexte
Basé sur le langage HTML, fils du SGML
Système d’information et de communication multimédia

Accessible 24h/24h, dans le monde entier
Son outil est le site Internet ou web site
Le WWW est un réseau d’information composé de sites web


Le réseau Internet
Pour en savoir plus…
www.journaldunet.com
www.cyberatlas.com
www.nua.net
www.w3C.com
www.cnet.com
www.wired.com


Les sites web
Les sites web
Le WWW est un réseau d’information composé de sites web
Un site web ou site Internet est un outil de communication

Un site web se consulte avec un navigateur ou browser
Un site web est composé de plusieurs types de documents

Le document principal est la page web ou page HTML
La page web est codée en langage hypertexte
Elle contient des liens vers différents objets
Une page web n’a pas de limites physiques à droite et en bas
Chaque site web est identifié par une adresse HTTP

Chaque page web est accessible sur un serveur de site web


Les sites web
Les sites web
Un site web se caractérise par les éléments suivants :
Un site est localisé par une adresse http

Un site est accessible 24h/24H sur Internet
Un site est composé de pages web reliées entre elles
Un site est lisible par au moins un type de navigateur
Un site est régulièrement mis à jour


Les sites web
Les fonctions
Un site web sert essentiellement à :
- Chercher des informations

- Échanger des messages et « chatter »
- S’informer sur l’actualité
- Consulter des magasins en ligne et acheter des produits
- S’informer sur une entreprise et ses services
- Se divertir, se cultiver
- Étudier et assurer sa formation professionnelle
- Collaborer entre entreprises partenaires
- Assurer la promotion d’autres sites, de corporations
Un site répond à un besoin précis d’un utilisateur


Les sites web
Le contenu
Un site web contient généralement les éléments suivants :
- Du texte
- Des images, cliquables ou non
- Des liens hypertextes
- Des éléments nécessitant des plugs-ins
- Du son
- De la vidéo
- Des programmes exécutables (Java, PERL, CGI)

- Des liens avec des bases de données (ASP, PHP, CFL)
- Des formulaires interactifs et de recherche
- Des systèmes de e-paiement
Attention : ne pas confondre les fonctions du navigateur avec les outils du site Internet


Les sites web
La typologie
Différents niveaux de développement d’un site Internet

Année 2003-2004
PARTIE 2
Conception de sites


La stratégie
Avant de commencer :
Il faut savoir que :
Un site Internet n’est jamais terminé

Un site Internet coûte plus cher en maintenance qu’en création
Un site Internet existant ne doit pas être entièrement modifié
La plupart des site Internet sont de mauvaise qualité
Il est impossible de faire développer un site professionnel par un amateur

Un site Internet est vu par des millions de gens, souvent par hasard


La stratégie
2 types de développeurs :
Celui qui développe pour sa propre entreprise :

- Son client est sa hiérarchie…
Celui qui développe dans une entreprise de web design :

- Son client est une entreprise…
Différences fondamentales dans :
- Les processus
- Les moyens et solutions techniques
- La durée du projet et les délais de développement


La stratégie
Définir les objectifs
Pourquoi faire un site Internet ?
- Définir sa fonction
- Définir ce que l’on attend de lui
- Définir ce qu’il va apporter à l’entreprise
Exemple d’objectifs :
- Augmenter les ventes

- Développer mon marché sur tel créneau ou secteur ou pays
- Améliorer mon image
- Rendre un meilleur service à mes clients


La stratégie
Le succès réside dans :
Les bons choix techniques

Une bonne analyse
Une bonne compréhension des objectifs
Une adéquation parfaite entre objectifs et besoins
Une bonne répartition des tâches
Un développement méticuleux
Un plan de site rigoureux, testé et efficace
Une évaluation honnête du site produit


La stratégie
Objectifs, besoins, fonctions :
J’ai faim : mon objectif est de manger

Mon besoin est d’avaler des aliments
Les fonctions que j’utilise dans ce cas sont :
- Faire les courses

- Cuisiner
- Avaler
Les outils :
- Four, casserole, cuillère
Le contenu : les aliments


La stratégie
Définir les besoins
La différence entre un besoin et un objectif :
Un objectif a une valeur générique, globale.

Il exprime généralement un manque à combler ou une nouvelle idée
Le besoin est concret, vérifiable, calculable.
Exemple de besoins :
- Notre image est mauvaise : Le design du site doit être excellent

- Nos moyens sont limités : le site doit être simple et vite produit
- Notre clientèle est arabophone : le site doit être bilingue arabe
Les besoins sont l’expression concrète des objectifs


La stratégie
Les fonctions
Chaque projet professionnel :
- est basé sur des objectifs

- répond à des besoins
- rempli certaines fonctions
Les fonctions, représentées par les outils, sont par exemple :
- Vendre sur Internet

- Donner des informations à jour
- Préciser les détails de chaque produit de notre catalogue


La stratégie
Avantages comparatifs


La stratégie
Analyse


Le cahier des charges
Les processus à définir
La rédaction du cahier des charges comprend les éléments suivants :
- Structure de l’information / Plan du site

- Décisions techniques / Plateformes, logiciels, connexions
- Décisions normatives et culturelles
- Décisions RH / Équipe de développement
-


Les processus à définir


L’équipe de développement
Chef de projet – Project manager
Responsable du contenu – Content manager
Architecte – Information designer
Graphiste ergonome - Web designer
Développeur HTML – HTML developer
Programmeur et analyste BDD – DBA programmer
Testeur qualité et navigation – QA tester
Responsable marketing – Site marketer
Conseiller juridique - Lawyer


Besoins et choix techniques
Solution interne ou externe ?
Développement d’outils ou achats ?
Quelle plate-forme choisir ?
- Hosting
- Solution interne


Plan de développement du site :
Étape 1: Produire le contenu : Word, Bases de données, images
Étape 2: Produire le plan du site à partir du contenu
Étape 3: Valider le plan
Étape 4: Préparer les sketchs
Étape 5: Valider les sketchs
Étape 6: Développer les templates
Étape 7: Développer l’ossature du site à partir des templates
Étape 8: Finaliser le design des templates
Étape 9: Développer les pages « menu » et les pages d’accueil
Étape 10 : Compléter les pages HTML et les pages dynamiques
Étape 11 : Tester, évaluer, modifier


Calendrier et moyens


L’architecture et le design
Le contenu et la navigation
2 étapes du web design :
- INFORMATIONAL
- VISUAL
Un bon site combine les 2 aspects.


La navigation dans le site est essentielle
Elle doit être claire et facilement lisible

Les catégories et les niveaux doivent également être clairs
Il doit toujours être possible de se déplacer d’une section à l’autre
Il doit toujours être possible de retourner à la page d’accueil
La navigation doit disposer d’un look standard et reconnaissable
Les pages doivent généralement se ressembler le plus possible
Éviter les scripts ne fonctionnant que sur un seul navigateur

Toujours fournir une navigation verticale dans la page
Toujours fournir un menu texte (pour les sections principales)
« Persisent navigation »
www.adobe.com - www.apple.com - www.benetton.com


Évaluer la navigation :
Combien de temps avez-vous mis pour comprendre le SN ?

Savez-vous toujours où vous vous trouvez dans le site ?
Est-ce facile de retrouver son chemin en arrière sans faire « back » ?
Avez-vous une vue claire de la structure générale du site ?
Avez-vous vu différents systèmes de navigation ?
Les pages du site ont-elles toutes une identité graphique commune ?
Les clés du succès :
Une structure claire et efficace

Un bon usage des graphiques et des couleurs
De bons intitulés de section
Une localisation claire
Un bon usage des outils informatiques (js, menus déroulants)


L’ergonomie et l’adaptation culturelle
L’ergonomie est la science de l’adaptation aux sens humains :
- Vision
- Référentiel
- Mouvements physiques
L’adaptation culturelle permet de cibler sa clientèle :
- Les humains n’ont pas tous les mêmes références

- Les humains ne parlent pas tous la même langue
- Les humains ne pensent pas tous la même chose
- Certaines choses acceptables par certains ne le sont pas par d’autres


La structure de l’information
Pour structurer son information :
- Penser en « objets »
- Choisir sa structure : étoile ou pyramide
- Lier les objets entre eux horizontalement et verticalement
- Commencer avec les catégories principales (Pas plus que 7)
- Ne pas aller trop loin dans le détails (Pas plus de 4 clics)
- Penser aux noms des sections – Faire court
- Penser à l’extension du site


La maintenance du site


Marketing et évaluation
Principes du marketing Internet


Promotion du site : Solutions


Évaluation

Année 2003-2004
PARTIE 3
Atelier de conception

PARTIE 3 : Atelier de web design

Éléments de base
Définitions
Un site a pour objectif d’organiser et de présenter l’information
Un site est un espace en trois dimensions
Un site a toujours une page d’accueil, la home page
Le web design, c’est : Rédiger, organiser, présenter
L’architecture du site est aussi importante que le look du site


Éléments de base
Textes et images


Éléments de base
Limitations et normes techniques


Éléments de base
Animation et interactivité


Éléments de base
Les sites dynamiques


Éléments de base
Tester son site
Toujours tester sur plusieurs systèmes, avec plusieurs logiciels
Pour rechercher :
Les liens brisés

Les erreurs de navigation
Les erreurs d’affichage
Les problèmes de couleur et de polices
Les points de lenteur
Les incohérences de la navigation
Les fôtes d’aurtografe


Créer un site avec Dreamweaver
Un logiciel et ses outils


Maquettes et plans de sites


Créer une page web


Menus et écrans dans Dreamweaver


Créer une page web : Header et body


Créer une page web : Textes et tables


Créer une page web : Textes et tables


Créer une page web : Images et graphiques


Créer un site web : Liens hypertextes : La navigation


Créer un site web : Templates


Créer un site web : Feuilles de style CSS


Créer un site web : Formulaires

Conceptionsitesweb

Transféré par

Droits d'auteur :

Formats disponibles

Conceptionsitesweb

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Conceptionsitesweb

Transféré par

Droits d'auteur :

Formats disponibles

Conception de projets de sites web – Stefan B.

COURS DE CONCEPTION DE SITES WEB

Université Saint-Joseph de Beyrouth – 2003-2004

- Comprendre le rôle et le fonctionnement d’un site web

- Savoir anticiper la mise en place d’un site web

- Préparer un plan de développement de projet site web

- Maîtriser les concepts de base du web design

- Connaître et utiliser les outils et solutions de développement

- Maîtriser les bases de la création de site avec Dreamweaver

Université Saint-Joseph de Beyrouth – 2003-2004

Un cours basé sur :

- Des documents à lire

- Des sites Internet de référence

- Des exemples à consulter sur Internet

- Des exercices pratiques en classe et en TPC

- Un projet personnel à réaliser par groupe de 2

- Une évaluation sur la participation et les TPC

Université Saint-Joseph de Beyrouth – 2003-2004

Un cours conçu à partir des ouvrages suivants :

- Robin Williams : Web design workshop, Peachpit Press

- Les conseils de Gerry McGovern, sur New thinking

Université Saint-Joseph de Beyrouth – 2003-2004

-1 : Connaissances nécessaires de base

-3 : Atelier de web design

Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 1 : Les bases

Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet

- Définition des objectifs

-2 : Le cahier des charges

Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet

- Principes du marketing Internet

Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de Web design

Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de Web design

-2 : Créer un site avec Dreamweaver

- Un logiciel et ses outils

Université Saint-Joseph de Beyrouth – 2003-2004

Université Saint-Joseph de Beyrouth – 2003-2004

COURS DE CONCEPTION DE SITES WEB

Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 1 : Les bases

Créé à partir du réseau militaire américain ARPANET dans les 60’s

Internet est un outil de communication

Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 1 : Les bases

Pour se connecter à Internet :

Tout type d’ordinateur peut se connecter à Internet

Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 1 : Les bases

Internet est un ensemble de services :

- Le courrier électronique (Protocole SMTP)

Chaque service nécessite des logiciels différents :

E-mail : MS Outlook, eudora, netscape Mail

Certains logiciels combinent plusieurs services

Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 1 : Les bases