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

Université Saint-Joseph de Beyrouth – 2003-2004 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 Université Saint-Joseph de Beyrouth – 2003-2004

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 Université Saint-Joseph de Beyrouth – 2003-2004

Université Saint-Joseph de Beyrouth – 2003-2004 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 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 Université Saint-Joseph de Beyrouth – 2003-2004

Université Saint-Joseph de Beyrouth – 2003-2004 PLAN DU COURS 1 : Connaissances nécessaires de base 2 : La conception de projet 3 : Atelier de web design Université Saint-Joseph de Beyrouth – 2003-2004

Université Saint-Joseph de Beyrouth – 2003-2004 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 Université Saint-Joseph de Beyrouth – 2003-2004

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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet 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 Université Saint-Joseph de Beyrouth – 2003-2004

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 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 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 Université Saint-Joseph de Beyrouth – 2003-2004

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 Université Saint-Joseph de Beyrouth – 2003-2004

COURS DE CONCEPTION DE SITES WEB Année 2003-2004 PARTIE 1 Le réseau Internet Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 1 : Les bases 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) Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 1 : Les bases 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 1 : Les bases 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 1 : Les bases 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 1 : Les bases 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 1 : Les bases 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 1 : Les bases 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 1 : Les bases 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 1 : Les bases 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 1 : Les bases Les sites web La typologie Différents niveaux de développement d’un site Internet Université Saint-Joseph de Beyrouth – 2003-2004

COURS DE CONCEPTION DE SITES WEB Année 2003-2004 PARTIE 2 Conception de sites Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet La stratégie Avant de commencer : 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet La stratégie Avant de commencer : 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet La stratégie Avant de commencer : 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet La stratégie Avantages comparatifs Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet La stratégie Analyse Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet 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 - Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet Le cahier des charges Les processus à définir Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet Le cahier des charges 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet Le cahier des charges Besoins et choix techniques Solution interne ou externe ? Développement d’outils ou achats ? Quelle plate-forme choisir ? - Hosting - Solution interne Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet Le cahier des charges 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet Le cahier des charges Calendrier et moyens Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet L’architecture et le design Le contenu et la navigation 2 étapes du web design : - INFORMATIONAL - VISUAL Un bon site combine les 2 aspects. Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet L’architecture et le design Le contenu et la navigation 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet L’architecture et le design Le contenu et la navigation É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) Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet L’architecture et le design 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet L’architecture et le design 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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet L’architecture et le design La maintenance du site Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet Marketing et évaluation Principes du marketing Internet Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet Marketing et évaluation Promotion du site : Solutions Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 2 : La conception de projet Marketing et évaluation Université Saint-Joseph de Beyrouth – 2003-2004

COURS DE CONCEPTION DE SITES WEB Année 2003-2004 PARTIE 3 Atelier de conception Université Saint-Joseph de Beyrouth – 2003-2004

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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de web design Éléments de base Textes et images Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de web design Éléments de base Limitations et normes techniques Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de web design Éléments de base Animation et interactivité Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de web design Éléments de base Les sites dynamiques Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de web design É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 Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Un logiciel et ses outils Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Maquettes et plans de sites Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Créer une page web Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Menus et écrans dans Dreamweaver Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Créer une page web : Header et body Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Créer une page web : Textes et tables Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Créer une page web : Textes et tables Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Créer une page web : Images et graphiques Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Créer un site web : Liens hypertextes : La navigation Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Créer un site web : Templates Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Créer un site web : Feuilles de style CSS Université Saint-Joseph de Beyrouth – 2003-2004

PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Créer un site web : Formulaires Université Saint-Joseph de Beyrouth – 2003-2004