Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth –...

Université Saint-Joseph de Beyrouth – 2003-2004

Conception de projets de sites web – Stefan B. Bazan

COURS DE CONCEPTION DE SITES WEB

Stefan B. BazanUniversité Saint-Joseph



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 :

- [email protected]




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’sRéseau de serveurs informatiques interconnectésCes serveurs utilisent le protocole TCP/IPDes clients sont connectés aux serveursCette connexion se fait grâce à un ISP

Principes :

Internet est un outil de communicationInternet n’appartient à personneLes serveurs et les clients communiquent par requêtesChaque client et chaque serveur ont une adresse IP différenteLes 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 à InternetInternet est un ensemble de servicesUn organisme international, le W3C, dirige InternetIl existe des Internet privés, comme AOLNe 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 MailWeb : MS Explorer, Netscape, Mozilla, Opéra

Certains logiciels combinent plusieurs services




Le réseau Internet

Le WWW

Le WWW est un service de l’InternetCréé en 1993 par Tim Berner Lee au CERN de Genève, SuisseUtilise le protocole http (Hypertext transmission protocol)Basé sur le principe de l’hypertexteBasé sur le langage HTML, fils du SGML

Système d’information et de communication multimédiaAccessible 24h/24h, dans le monde entierSon 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.comwww.nua.net

www.w3C.comwww.cnet.comwww.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 communicationUn site web se consulte avec un navigateur ou browser

Un site web est composé de plusieurs types de documentsLe document principal est la page web ou page HTMLLa page web est codée en langage hypertexteElle 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 HTTPChaque 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 httpUn site est accessible 24h/24H sur InternetUn site est composé de pages web reliées entre ellesUn site est lisible par au moins un type de navigateurUn 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éationUn 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 amateurUn 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 techniquesUne bonne analyseUne bonne compréhension des objectifsUne adéquation parfaite entre objectifs et besoinsUne bonne répartition des tâchesUn développement méticuleuxUn plan de site rigoureux, testé et efficaceUne évaluation honnête du site produit




La stratégie


Objectifs, besoins, fonctions :

J’ai faim : mon objectif est de mangerMon besoin est d’avaler des alimentsLes 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 managerResponsable du contenu – Content managerArchitecte – Information designerGraphiste ergonome - Web designerDéveloppeur HTML – HTML developerProgrammeur et analyste BDD – DBA programmerTesteur qualité et navigation – QA testerResponsable marketing – Site marketerConseiller 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 lisibleLes catégories et les niveaux doivent également être clairsIl doit toujours être possible de se déplacer d’une section à l’autreIl doit toujours être possible de retourner à la page d’accueilLa navigation doit disposer d’un look standard et reconnaissableLes pages doivent généralement se ressembler le plus possible

Éviter les scripts ne fonctionnant que sur un seul navigateurToujours fournir une navigation verticale dans la pageToujours 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 efficaceUn bon usage des graphiques et des couleursDe bons intitulés de sectionUne localisation claireUn 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’informationUn site est un espace en trois dimensionsUn 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ésLes erreurs de navigationLes erreurs d’affichageLes problèmes de couleur et de policesLes points de lenteurLes incohérences de la navigationLes 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 : 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

Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth –...

Documents

Transcript of Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth –...