REALISATION D'UN SITE WEB

Transcription

1 LYCEE Mknine DISCIPLINE : TECHNOLOGIES DE L INFORMATION ET DE LA COMMUNICATION PROFESSEUR : Mr Grich Murad CHAPITRE 4 REALISATION D'UN SITE WEB I. Intrductin Un site Web est un ensemble des pages Web qui peuvent cntenir du texte, des images, des tableaux Pur la créatin de sites Web n aura besin d'un lgiciel de créatin de sites Web, parmi les lgiciels libres* utilisés: Bluefish, Ginf, Screem... Dans la suite n utilisera le lgiciel libre NVU II. Les étapes de réalisatin d'un site Web statiques 1. Intrductin La créatin d'un site Web est un prjet qui cmprend un ensemble d'étapes d'avant-prjet qui divent être suivies pur bien réussir sa réalisatin, il s'agit d'une démarche stratégique et créative devant être réalisée en y assciant l'ensemble des parties du prjet. Les étapes de créatin d'un site Web snt : Le dévelppement Cnsiste à étudier la faisabilité du site, la rédactin de cahier des charges, la cnceptin de la navigatin et la réalisatin technique. L'hébergement u publicatin Qui permet de mettre le site en ligne pur qu'il sit accessible par les internautes. Le référencement Qui a pur bjectif de faire cnnaître le site aux différents mteurs et utils de recherche. La mise à jur Qui permet de réviser péridiquement le cntenue du site L'évaluatin Qui permet de savir le degré de perfrmance du site. 2. Le dévelppement a) L'étude préalable Cnsiste à définir les bjectifs du site car les pages divent être écrites pur remplir les bjectifs spécifiés. b) Le cahier des charges C'est un dcument de spécificatin qui va servir cmme référence pur les étapes qui suivent le dévelppement d'un site Web qui décrit les caractéristiques du site Web à réaliser (bjectif, thème, ) ainsi que d'autre cntraintes (délais de cnceptin et de réalisatin). c) La cnceptin de la structure de navigatin (Préparatin d'un stry-bard) Cette étape cnsiste à structurer l'infrmatin en un grupe de pages. Il faut un type de structure du site qui décrit les myens pur se déplacer dans la structure du site : chisir le type des liens (butn, hypertexte, menu, ), chisir le sens à dnner (suivant, précédent, back, tp, frnt ). Tutes les infrmatins sernt représentées sus frme d'un stry-bard (un carnet de brd) cntenant l'architecture u la structure de navigatin du site. Le stry-bard permet d'avir une vue d'ensemble de ce à qui rassemblera le site une fis terminé. Il sert cmme repère lrs de dévelppement des différentes pages WEB. Dans le cas de grands sites, le stry-bard permet à plusieurs persnnes de dévelpper différentes parties du site. Un stry-bard ressemble à un ensemble de feuilles de papier. Chaque feuille représente un page du site, avec une liste de pints que la page va décrire et les liens que cette page va inclure. Les mdèles (structures) de navigatin les plus curants snt : La structure linéaire u séquentielle: Ce mdèle est assez similaire à la manière dnt n parcurt les dcuments imprimés. On truve une page d'accueil (hme), qui nus renvie vers la page suivante et ainsi de suite. Vir Figure page 116. Chapitr4 : Réalisatin d'un site Web page 1/6

2 La structure Hiérarchisée On truve une page d'accueil, qui nus renvie vers des pages secndaires. Chacune des ces pages revie à un ensemble de pages qui cntiennent elles même des liens vers cette page. Vir Figure page 117. La structure cmpsite C'est une structure qui est très utilisée. A partir de la page d'accueil, n peut aller à des niveaux distincts du site et vis versa. d) La réalisatin technique La cllecte des dnnées Il s'agit de la cllecte de certains bjets (textes, images, sns et vidés), u leurs créatin et de les rganiser dans des dssiers séparés. L'intégratin Cnsiste à réunir les bjets préparés en respectant le stry-bard. Cette étape englbe l'étape de test et de crrectin, n dit dispser d'un navigateur pur tester lcalement le bn fnctinnement des différentes pages et cmpsants du site. Remarques Pur créer un site web n a besin Des lgiciels de dessin. Des lgiciels d'animatins : flash Des navigateurs : Mzilla Firefx, Internet Explrer Lgiciel de créatin des pages web : Les éditeurs de texte simple : Par l'empli du cde surce de la page WEB en utilisant le langage HTML et ses balises. Les éditeurs WYSIWYG (What yu See Is What Yu Get) : Ce snt des éditeurs ù n ne vit pas le cde HTML qui est généré par le lgiciel (FrntPage,Dreamweaver ) 3. L'hébergement (Publicatin de la versin définitive) Cette étape permet de mettre le site WEB en ligne pur qu'il sit accessible par les internautes. C'est à dire de stcker le site sur un serveur qui est cnnecté en permanence à Internet. Pur héberger un site WEB il faut avir un nm de dmaine (le nm que vus taper dans la barre d'adresse) unique et significatif (exemple : Ministère d'éducatin et de la frmatin, : site de la pste tunisienne, : site de cmmerce électrnique). Une fis le nm de dmaine est réservé, il faut stcker le site dans le serveur d'hébergement et asscier la page d'index du site au nm du dmaine. Pur l'pératin d'hébergement n peut utiliser l'une des manières suivantes: Cntacter directement l'hébergeur et lui dnner le site. Envyer le site sur un supprt de stckage par pste. Envyer le site cmme fichiers jints par currier électrnique pur un site de petite taille. Utiliser un lgiciel de transfert de fichiers pur transférer le site d'un rdinateur lcal à un autre distant. 4. Le référencement Cette pératin cnsiste à utiliser des techniques pur annncer le site WEB afin que les internautes sachent que vtre site à été hébergé et puissent le visiter. Cette étape cmprte : L'indexatin (submissin) : Cnsiste à faire cnnaître le site auprès des mteurs de recherche, u bien utiliser des utilitaires "multi référencer" qui cmprte un frmulaire dnt le cntenu sera envyer aux différents mteurs et annuaires explités. Le psitinnement (psitinning) : cnsiste à psitinner le site u certain pages du site en première page de résultat pur certain mts-clés. Chapitr4 : Réalisatin d'un site Web page 2/6

3 Le classement (ranking) : similaire au psitinnement pur des expressins plus élabrées. 5. La mise à jur Pur attirer les surfeurs et le site WEB reste accessible, il faut prévir des mises à jur péridiquement du cntenue du site. Il s'agit de stcker des nuvelles versins. 6. L'évaluatin Ce snt des règles nrmales de la critique qui s'applique au site pur évaluer la qualité des infrmatins, leur exactitude, pertinence, fraîcheur, l'ergnmie, interactivité, III. Présentatin de lgiciel d'intégratin 1. Présentatin du lgiciels NVU a.utilisatin du système d'aide de NVU Déruler le menu "Aide" Chisir l ptin "Cntenu de l'aide Le système d'aide ffres des mdes de navigatin: Le smmaire (mde de base) L'index (alphabétique) La recherche (mde avancé) b.l'espace de travail de NVU La barre d'utils Principale Cmpsée par les butns représentant les cmmandes les plus utilisé de l'applicatin exemple : nuveau, Enregistrer... La barre d'utils de mise en frme Exemple B (Gras), I (italique), U (suligné) La barre des nglets Affiche les titres des pages uverts. Une icône de disquette apparaît dans chaque nglet pur indiquer qu'un dcument a été mdifié mais nn enregistré. La barre d'utils des mdes d'éditin Permettant de basculer entre les différentes vue dispnible : Nrmal, Balise HTML, Surce, Aperçu La barre d'état Affiche la psitin du curseur en respectant la hiérarchie des balises HTML. Pur sélectinner le texte encadrer par un balise : simple clic gauche Chapitr4 : Réalisatin d'un site Web page 3/6

4 Pur éditer/définir : clic drit. 2. Les étapes préliminaires a. Créatin (éditin) du site Avant de cmmencer l'étape de créatin de vtre site. Il faut penser à l'rganisatin du dssier principal du site, ainsi les sus dssiers cntenant chacun un type de média. Pur créer l'arbrescence d'un site n peut sit utiliser l'explrateur de système, sit prcéder par Le gestinnaire de sites, en effet : 0) Début créatin 1) Cliquer sur le butn Editin des sites dans le gestinnaire de site une bite de dialgue (paramètre de publicatin) apparaît. 2) Cliquer sur le butn Nuveau site 3) Taper le nm du site dans la zne de texte Nm du site 4) Créer le dssier principal du site : cliquer sur le butn parcurir une bite de dialgue (Rechercher un dssier) apparaît chisir l'emplacement cliquer sur le butn Créer un nuveau dssier. 5) Valider par OK pur les deux bites de dialgues. 6) Dans le gestinnaire de sites cliquer sur le butn Nuveau dssier pur créer les dssiers nécessaires à vtre site. 7) Fin créatin. b. Créatin d'une nuvelle page Web Déruler le menu "Fichier" Chisir l ptin "nuveau" Valider 3. Intégratin a. Insertin d un tableau Déruler le menu Tableau Chisir l ptin insérer tableaudéterminer les paramètres relatifs au tableau (ligne, clnnes, etc.) Valider. Chapitr4 : Réalisatin d'un site Web page 4/6

5 b. Prpriétés de la page Déruler le menu "Frmat" Chisir l ptin "Titre et prpriétés de la page " Taper le titre, l'auteur c. Mise en frme de texte Déruler le menu "Frmat" Chisir les ptins désirées : plice, taille, style, culeur Ou bien Chisir l ptin "Culeurs et fnd de page " définir les ptins désirées : culeurs (texte, liens...), l'arrière plan d. Insertin d images Déruler le menu "insertin"chisir l ptin "image" Définir l'adresse (chemin relatif u abslu de l'image) Valider e. Insertin d un Ancre (signet) Sélectinner à l aide du curseur le u les mts qui vnt servir de déclencheurs pur atteindre la cible. Déruler le menu Insertin, Chisir l ptin Ancre ; une bîte de dialgue apparaîtra (prpriétés de l'ancre) Taper le nm de L'ancre Un symble de l'ancre viendra se rajuter à cté du texte, Chapitr4 : Réalisatin d'un site Web page 5/6

6 f. Insertin des liens : Sélectinner le texte u l'image qui va servir cmme lien Déruler le menu "insertin" Cliquer sur la cmmande Lien (CTRL+L) u bien sur l'icône crrespndant de la barre d'util Liens internes Pur insérer un lien interne déruler la liste de la zne "emplacement du lien" Sélectinner l'ancre désirée. Liens externes Pur insérer un lien externe : cliquer sur le butn parcurir une bite de dialgue apparaît sélectinner le fichier à atteindre avec le lien. g. Aperçu dans le navigateur Un fis n a crée les pages, il reste à les tester en utilisant un navigateur : Internet Explrer, FireFx IV. Publicatin (Hébergement) du site Web Cette étape permet de mettre le site WEB en ligne. Il existe tris catégries de lgiciels pur stker les fichiers du site Web dans le serveur d'hébergement : 1. Utilisatin des lgiciels de transfert de fichiers Qui permettent d'envyer n'imprte quel fichier de n'imprte quel pste à n'imprte quel autre pste. Exemple de lgiciels : CuteFTP, FtpExplrer, Filezilla, vir Figures page 132 et Utilisatin des lgiciels intégrés Qui snt intégrés dans les lgiciels de créatin de site Web (NVU, Dreamweaver, Frntpage, Claris Hme Page, ) vir Figure page Utilisatin des lgiciels rientés Web Qui snt prpsés par les hébergeurs. Il s'agit de se cnnecter au site Web de l'hébergeur, qui vus prpse un lien vers l'utilitaire de téléchargement. Vir Figure page 135. Dans le cas de 'utilisatin d'un lgiciels de téléchargement vus devez dispser d'un cmpte et un mt de passe pur puvir accéder à l'espace disque que l'hébergeur vus a réservé. Chapitr4 : Réalisatin d'un site Web page 6/6