La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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

Présentations similaires


Présentation au sujet: "Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – 2003-2004 COURS DE CONCEPTION DE SITES WEB Stefan B. Bazan Université"— Transcription de la présentation:

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

2 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – OBJECTIFS DU COURS - Comprendre le rôle et le fonctionnement dun site web - Savoir anticiper la mise en place dun 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

3 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – 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

4 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – 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

5 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PLAN DU COURS -1 : Connaissances nécessaires de base -2 : La conception de projet -3 : Atelier de web design

6 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – 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

7 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – 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

8 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 2 : La conception de projet -3 : Larchitecture - Le contenu et la navigation - Lergonomie et ladaptation culturelle - La structure de linformation - La maintenance du site -4 : Marketing et évaluation - Principes du marketing Internet - Solutions - Méthodes dévaluation

9 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 3 : Atelier de Web design -1 : Les bases - Définitions - Textes et images - Limitations et normes techniques - Lanimation et linteractivité - Les sites dynamiques

10 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – 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

11 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – Sources dinformation -1 : Le site du cours : -www.stefanbazan.com/cours/webdesign03/www.stefanbazan.com/cours/webdesign03/ - Plan du cours - Documents en format PDF - Sujets des TPC - Liens vers des sites à visiter - Logiciels -2 : Le -

12 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – COURS DE CONCEPTION DE SITES WEB Année PARTIE 1 Le réseau Internet

13 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 1 : Les bases Le réseau Internet Historique et principes Créé à partir du réseau militaire américain ARPANET dans les 60s 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 nappartient à 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)

14 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – 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 lInternet : - Une connexion, des logiciels Pour produire des services Internet : - Une connexion haut débit, un serveur Principes : Tout type dordinateur 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

15 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – 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 : MS Outlook, eudora, netscape Mail Web : MS Explorer, Netscape, Mozilla, Opéra Certains logiciels combinent plusieurs services

16 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 1 : Les bases Le réseau Internet Le WWW Le WWW est un service de lInternet 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 lhypertexte Basé sur le langage HTML, fils du SGML Système dinformation 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 dinformation composé de sites web

17 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 1 : Les bases Le réseau Internet Pour en savoir plus…

18 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 1 : Les bases Les sites web Les sites web Le WWW est un réseau dinformation 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 na 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

19 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 1 : Les bases 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

20 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 1 : Les bases Les sites web Les fonctions Un site web sert essentiellement à : - Chercher des informations - Échanger des messages et « chatter » - Sinformer sur lactualité - Consulter des magasins en ligne et acheter des produits - Sinformer sur une entreprise et ses services - Se divertir, se cultiver - Étudier et assurer sa formation professionnelle - Collaborer entre entreprises partenaires - Assurer la promotion dautres sites, de corporations Un site répond à un besoin précis dun utilisateur

21 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – 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

22 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 1 : Les bases Les sites web La typologie Différents niveaux de développement dun site Internet

23 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – COURS DE CONCEPTION DE SITES WEB Année PARTIE 2 Conception de sites

24 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 2 : La conception de projet La stratégie Avant de commencer : Il faut savoir que : Un site Internet nest jamais terminé Un site Internet coûte plus cher en maintenance quen 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

25 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – 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

26 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – 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 lon attend de lui - Définir ce quil va apporter à lentreprise Exemple dobjectifs : - 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

27 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – 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

28 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 2 : La conception de projet La stratégie Avant de commencer : Objectifs, besoins, fonctions : Jai faim : mon objectif est de manger Mon besoin est davaler des aliments Les fonctions que jutilise dans ce cas sont : - Faire les courses - Cuisiner - Avaler Les outils : - Four, casserole, cuillère Le contenu : les aliments

29 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – 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 lexpression concrète des objectifs

30 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – 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

31 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 2 : La conception de projet La stratégie Avantages comparatifs

32 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 2 : La conception de projet La stratégie Analyse

33 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – 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 linformation / Plan du site - Décisions techniques / Plateformes, logiciels, connexions - Décisions normatives et culturelles - Décisions RH / Équipe de développement -

34 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 2 : La conception de projet Le cahier des charges Les processus à définir

35 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – 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

36 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 2 : La conception de projet Le cahier des charges Besoins et choix techniques Solution interne ou externe ? Développement doutils ou achats ? Quelle plate-forme choisir ? - Hosting - Solution interne

37 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – 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 lossature du site à partir des templates Étape 8 : Finaliser le design des templates Étape 9 : Développer les pages « menu » et les pages daccueil Étape 10 : Compléter les pages HTML et les pages dynamiques Étape 11 : Tester, évaluer, modifier

38 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 2 : La conception de projet Le cahier des charges Calendrier et moyens

39 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 2 : La conception de projet Larchitecture et le design Le contenu et la navigation 2 étapes du web design : - INFORMATIONAL - VISUAL Un bon site combine les 2 aspects.

40 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 2 : La conception de projet Larchitecture 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 dune section à lautre Il doit toujours être possible de retourner à la page daccueil La navigation doit disposer dun 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 »

41 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 2 : La conception de projet Larchitecture 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)

42 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 2 : La conception de projet Larchitecture et le design Lergonomie et ladaptation culturelle Lergonomie est la science de ladaptation aux sens humains : - Vision - Référentiel - Mouvements physiques Ladaptation culturelle permet de cibler sa clientèle : - Les humains nont 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 dautres

43 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 2 : La conception de projet Larchitecture et le design La structure de linformation 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 à lextension du site

44 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 2 : La conception de projet Larchitecture et le design La maintenance du site

45 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 2 : La conception de projet Marketing et évaluation Principes du marketing Internet

46 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 2 : La conception de projet Marketing et évaluation Promotion du site : Solutions

47 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 2 : La conception de projet Marketing et évaluation Évaluation

48 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – COURS DE CONCEPTION DE SITES WEB Année PARTIE 3 Atelier de conception

49 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 3 : Atelier de web design Éléments de base Définitions Un site a pour objectif dorganiser et de présenter linformation Un site est un espace en trois dimensions Un site a toujours une page daccueil, la home page Le web design, cest : Rédiger, organiser, présenter Larchitecture du site est aussi importante que le look du site

50 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 3 : Atelier de web design Éléments de base Textes et images

51 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 3 : Atelier de web design Éléments de base Limitations et normes techniques

52 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 3 : Atelier de web design Éléments de base Animation et interactivité

53 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 3 : Atelier de web design Éléments de base Les sites dynamiques

54 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – 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 daffichage Les problèmes de couleur et de polices Les points de lenteur Les incohérences de la navigation Les fôtes daurtografe

55 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Un logiciel et ses outils

56 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Maquettes et plans de sites

57 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Créer une page web

58 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Menus et écrans dans Dreamweaver

59 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Créer une page web : Header et body

60 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Créer une page web : Textes et tables

61 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Créer une page web : Textes et tables

62 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Créer une page web : Images et graphiques

63 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Créer un site web : Liens hypertextes : La navigation

64 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Créer un site web : Templates

65 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Créer un site web : Feuilles de style CSS

66 Conception de projets de sites web – Stefan B. Bazan Université Saint-Joseph de Beyrouth – PARTIE 3 : Atelier de web design Créer un site avec Dreamweaver Créer un site web : Formulaires


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

Présentations similaires


Annonces Google