1 / 66

COURS DE CONCEPTION DE SITES WEB

COURS DE CONCEPTION DE SITES WEB. Stefan B. Bazan Université 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

gunda
Download Presentation

COURS DE CONCEPTION DE SITES WEB

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

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

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

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

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

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

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

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

  13. PARTIE 1 : Les basesLe 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

  14. PARTIE 1 : Les basesLe 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

  15. PARTIE 1 : Les basesLe 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

  16. PARTIE 1 : Les basesLe 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

  17. PARTIE 1 : Les basesLe 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

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

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

  20. PARTIE 1 : Les basesLes 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

  21. PARTIE 1 : Les basesLes 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

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

  23. COURS DE CONCEPTION DE SITES WEBAnnée 2003-2004 PARTIE 2 Conception de sites Université Saint-Joseph de Beyrouth – 2003-2004

  24. PARTIE 2 : La conception de projetLa 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

  25. PARTIE 2 : La conception de projetLa 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

  26. PARTIE 2 : La conception de projetLa 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

  27. PARTIE 2 : La conception de projetLa 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

  28. PARTIE 2 : La conception de projetLa 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

  29. PARTIE 2 : La conception de projetLa 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

  30. PARTIE 2 : La conception de projetLa 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

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

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

  33. PARTIE 2 : La conception de projetLe 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

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

  35. PARTIE 2 : La conception de projetLe 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

  36. PARTIE 2 : La conception de projetLe 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

  37. PARTIE 2 : La conception de projetLe 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

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

  39. PARTIE 2 : La conception de projetL’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

  40. PARTIE 2 : La conception de projetL’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

  41. PARTIE 2 : La conception de projetL’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

  42. PARTIE 2 : La conception de projetL’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

  43. PARTIE 2 : La conception de projetL’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

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

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

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

  47. PARTIE 2 : La conception de projetMarketing et évaluation Évaluation Université Saint-Joseph de Beyrouth – 2003-2004

  48. COURS DE CONCEPTION DE SITES WEBAnnée 2003-2004 PARTIE 3 Atelier de conception Université Saint-Joseph de Beyrouth – 2003-2004

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

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

More Related