RAPPORT DE PROJET CREATION DU SITE INTERNET POUR LA
Contents
1. PRESENTATION DU PROJET I Pr sentation Le but de mon projet tait de construire le site Internet de la formation EEA de la FST de Mulhouse Le besoin principal tait premi rement de pr senter la formation EEA par le biais de l Internet d sormais incontournable pour la recherche d information et deuxi mement d avoir un site facile mettre jour sans avoir de grandes connaissances en programmation Web Pour ce faire mon tuteur Mr URBAN m a conseill d utiliser SPIP SPIP est un Syst me de Publication pour l Internet Il s agit d un ensemble de fichiers install s sur votre compte Web qui vous permettent de b n ficier d un certain nombre d automatismes g rer un site plusieurs mettre en page vos articles sans avoir taper du HTML modifier tr s facilement la structure de votre site Avec le m me logiciel qui sert visiter un site Mozilla Netscape Microsoft Explorer Opera SPIP permet de fabriquer et de tenir un site a jour grace a une interface tr s simple d utilisation SPIP appartient la famille des nombreux sites pages dynamiques que l on d signe souvent par CMS Content Management System la diff rence d un site statique o vous cr ez laborieusement chaque page un site dynamique s pare pour votre plus grand confort et une meilleure efficacit la forme la charte graphique du fond le contenu le plus souvent du texte Ce contenu est stock dans un2. amp azdine email 10 articles Les auteurs ext rieurs sans acc s au site sont indiqu s par une icone bleue les auteurs effac s par une poubelle RACCOURCIS e Cr er un nouvel auteur Informations personnelles La partie auteurs permet d obtenir des informations sur les auteurs ainsi que la liste de leurs articles Il y a deux types d auteurs les administrateurs qui ont tout les droits et les r dacteurs qui on juste le droits d crire un article et de le proposer a la publication c La partie CONFIGURATION AZPLBM ZR A suivre Edition Forum Auteurs Statistiques Configu jtion Aide Visiter ia Dx azdine o abc Q CETE Gestion des Maintenance du Vider le cache langues site AZDINE z Ecrire un ar Cr er une EF Ecrire une nouvel ES is nouvelle br ve article rubrique Supprimer le cookie de correspondance Master ISC Articles publi s en ligne 10 Auteurs Administrateurs 1 Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 19 25 Pour acc der aux onglets le plus important de la partie configuration il suffit de glisser la souris sur l ic ne Un menu d roulant appara t le plus important est vider le cache outils utiliser en cas de mise a jour du site Et le deuxi me choix tout aussi important est Maintenance du site qui permet de sauvegarder la base de donn e
3. dossier lang dossier upload vide oO Oo 0 Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 13 25 III Proc dure de configuration D sormais tout se d roule en ligne Il vous suffit d aller visiter votre dossier ecrire par le Web Installation du syst me de publication Premi re tape Votre connexion MySQL Consultez les informations fournies par votre htbergeur vous devez y trouver si votre h bergeur supporte MySQL les codes de connexion au serveur MySQL F Adresse de la base de donn es Souvent cette adresse correspond celle de votre site parfois elle correspond la mention localhost parfois elle est lains e totalement vide Le login de connexion Correspond parfois votre login d acc s an FTP parfois laiss vide peii Le mot de passe de connexion Correspond parfois votre mot de passe pour le FTP parfois laiss vide Lors de la premi re connections cette adresse une proc dure d installation pas pas d marre L interface est tr s simple il suffit d entrer les informations demand es essentiellement les informations concernant la base de donn es mySQL indiqu es au d but Une fois termin le syst me vous demande l identification que vous avez indiqu e et vous pouvez commencer g rer votre site Par la suite c est toujours dans ce dossier ecri
4. Les diff rentes parties de l espace priv sont repr sent es par des ic nes tout en haut de la page Les parties sur lesquelles je vais m tendre vont tre EDITION AUTEURS et CONFIGURATION Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 15 25 Voici l cran d accueil de SPIP D PAEH a Br suivre dition Forum Auteurs Statistiques Configuration Aide Visiter SR ME si gfe Of cs me LOGO STANDARD DES z p RUBRIQUES 7 Racine du site Master ISC Accueil Presentation RACCOURCIS Admissions Ressources Tous vos articles Etudes d Cr er une Plan d acces rib iqtie SPIP 1 8pri est un logiciel libre distribu sous licence GPL Pour plus d informations voir le site http www spip net fr a La partie EDITION Comme sont nom l indique la partie dition g re la structure du site c est ici que l on ajoute les rubriques sous rubriques et articles Pour l ajout d une rubrique un bouton Cr er une rubrique est pr vu cet effet La routine de cr ation est assez simple car il suffit d entrer le nom de la rubrique dans le champ pr vu a cet effet et valider A l int rieur d une rubrique plusieurs choix s offre nous Cr er une sous rubrique Ecrire un nouvel article Ecrire une nouvelle br ve Important Les articles cr s dan
5. gras et en italique Liste puces premier l ment deuxi me l ment etc Le petit trait sera automatiquement remplac par une puce telles qu elle est d finie dans la charte graphique Trait de s paration Entrer une ligne contenant quatre petits tirets au moins Lien hypertexte texte gt URL Mettre le texte et l URL entre crochets s par s par une fl che Le texte devient une zone cliquable et renverra le lecteur sur la page Web indiqu e par URL Ex le site EEA gt http www trop uha fr master Lien hypertexte vers un article texte gt n d article Pour renvoyer vers un article du site il suffit de donner le num ro de l article Par exemple en supposant que l article 12 donne la liste des contacts nous contacter gt 12 Lien vers une rubrique texte gt rubxxx O xxx est le num ro de la rubrique Ex voyez notre agenda gt rub3 Lien vers une br ve texte gt brxxx O xxx est le num ro de la br ve Ex Annonce de l AG gt br25 Note de bas de page texte de la note Le texte entre doubles crochets droits appara tra en bas de la page et automatique sera remplac par un num ro g n r automatiquement Note de bas de page lt x gt texte de la Le texte entre doubles crochets apparaitra en bas de page et sera num rot e note remplac par le num ro x indiqu entre lt gt Faire un tableau simpl
6. lt img84lleft gt lt img84 center gt lt img84jright gt 900 x 720 pixels Titre de l image Description Valider 13 Supprimer cette image Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 17 25 Titre et description de l image Vous pouvez si vous le d sirez indiquer un nom et une description pour chaque image Par exemple une explication ou une mention du copyright du photographe Supprimer cette image Comme son nom l indique le bouton Supprimer cette image permet d effacer ce fichier si vous avez fait une erreur de manipulation ou si vous d cidez finalement de ne pas utiliser l image dans ce texte Il est conseill d effacer les images inutilis es afin d viter d encombrer votre serveur avec des fichiers inutiles Vous pouvez recommencer l op ration avec autant d images que vous le d sirez un article ou une br ve peuvent contenir autant d images que n cessaire Etape 3 Ins rer une image l int rieur du texte A ce stade les fichiers graphiques sont bien pr sents sur le serveur mais il reste indiquer quel endroit de votre texte vous voulez les ins rer Pour cela inutile de faire du HTML SPIP vous propose un raccourci permettant d ins rer votre image simplement Images sans commentaire Pour chaque image voyez la mention des 3 raccourcis lt img llleft gt lt
7. was what structure I was going to use In other words the plan of the site I started to visit several sites of various schools to study their ideas For that I used 5 parts Reception Admissions Studies Access plan and Presentation It s for me the most useful parts to have information on a school curriculum The third and last problem dealt with the contents of the site which is for the moment provisional information lacking at the moment I have also in project to add a part on the student life Finally I managed SPIP code and thus succeeded in building all the skeletons well after having tested several styles of page setting And indeed the site is dynamic and easy to update as desired To be seen if the visitor like that http www trop uha fr master Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 5 25 CREATION DU SITE INTERNET I Compr hension de SPIP Tout le contenu d un site g r sous SPIP est install dans une base de donn es mySQL Pour pr senter ces informations aux visiteurs du site il faut donc r aliser l op ration qui consiste lire les informations les organiser et les mettre en page afin d afficher une page HTML dans le navigateur Web Cette op ration est traditionnellement assez p nible il faut conna tre la programmation PHP et MySQL et crire des routines relativement complexes l int gration de te
8. Licence EEA Projet Cr ation d un site Internet 1 25 LICENCE ELECTROTECHNIQUE ELECTRONIQUE AUTOMATISME RAPPORT DE PROJET CREATION DU SITE INTERNET POUR LA FORMATION EEA DE MULHOUSE Champs technologiques Informatique Communication Professeur responsable J P URBAN Etudiant EL MARNAOUI Azdine Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 2 25 SOMMAIRE PRESENTATION DU PROJET I Presemta OM pais sivas IE EE EE E E E 3 ID Pr sentation en AG nina ann en 4 CREATION DU SITE INTERNET D Compr hension de SPIP sisisi siokia ea 5 a Pour chaque de document un couple de fichier b Le principe de fonctionnement du cache c Le fichier PHP3 d Le fichier HTML e Une interface diff rente dans le m me site ID Les l ments g r s par PP een 10 a La hi rarchie des rubriques b Les articles MODE D EMPLOI D 12 My Installer ETES eeror enes e a EEEa ORAT AE EAEE 12 MD Proc dure de configuration uote 13 IV AL espace piye ws rs eE E ENEE T E a 14 a La partie EDITION b La partie AUTEURS c La partie CONFIGURATON CONCLUSION D LD ETATS EE AAE E E ATTE A EE 20 ANNEXE D Les raccourcis typographiques accses rina ne 22 ID Utilisez SPIP avec Bey PAP vor 23 Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 3 25
9. Pour obtenir la mise en page actuelle j ai donc construis deux squelettes stoker dans le dossier dist rubrique html et sommaire html Et cr un fichier CSS Exemple de code lt table align center width 800 cellspacing 0 cellpadding 0 border 0 gt lt tr gt lt td width 800 gt lt img src entete22 jpg BORDER 0 gt lt td gt lt td gt lt tr gt lt tr gt lt td align center width 800 bgcolor silver height 23 gt lt Menu de navigation rubriques gt lt BOUCLE_rubriques RUBRIQUES racine par num titre gt lt a href URL_RUBRIQUE title 4DESCRIPTIF textebrutlentites_html gt lt b gt TITRE lt b gt lt a gt lt BOUCLE_rubriques gt lt td gt lt tr gt lt table gt Le code en gras sert a la mise en page alors que le code en italique sert pour la r cup ration des donn es ici j ai cr le menu de navigation du site Comme on peut le constater le code SPIP est bas sur un syst me de boucles je vais vous en expliquer le fonctionnement La boucle RUBRIQUES retourne une liste de rubriques lt BOUCLEn RUBRIQUES crit res gt El Remarque Une boucle RUBRIQUES n affiche que des rubriques actives c est dire contenant des articles publi s des documents joints des sites publi s ou des sous rubriques elles m mes actives De cette fa on on vite de se trouver dans des rubriques culs de sac n offrant aucun
10. e aaa bbb ccc xxx yyy zzz Pour faire un tableau simple il suffit de s parer les colonnes par la barre verticale Cette m thode autorise uniquement des cellules d une seule ligne Pour faire des tableaux plus complexes utiliser le langage HTML Ins rer une image lt IMG1lleft gt lt CENTER gt lt IMGlicenter gt lt CENTER gt lt IMG I Iright gt L image doit avoir t pr c demment t l charg e sur le site par la fonction t l charger une nouvelle image dans la colonne de gauche affich e quand on r dige un article Le syst me indique alors sous quel nom l image est disponible et c est ce nom qui doit tre utilis dans les commandes ci contre Trois commandes sont disponibles selon qu on veut voir l image gauche au centre ou droite Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 23 25 II Utilisez SPIP avec EasyPHP Proc dure pour utiliser SPIP en local c est a dire sur notre PC sans tre oblig de passer par un h bergeur Ce tutorial se d roulera en trois temps Premier temps installation d easyphp second temps I installation des fichiers de SPIP sur votre Web local et enfin la configuration de SPIP INSTALLATION D EASYPHP 1 Tout d abord r cup rez le logiciel 2 Une fois easyphp r cup r et d compact sur votre disque lancez le fichier setup exe 3 Une fois
11. e base de donn es le plus souvent mySQL qui est appel e par le serveur le plus souvent Apache gr ce un langage de programmation le plus souvent PHP Pour diter des pages il suffit alors d diter du texte dans des cases via des formulaires dans votre navigateur Et c est pour cela qu il y a une partie publique le site vu par les visiteurs et une partie priv e l administration de votre CMS Un site g r sous SPIP comporte deux zones Zone Publique C est dans cette partie que se trouve l ensemble des informations publi es par les r dacteurs du site Comme tout site cette zone comporte des menus des rubriques des pages La mani re dont vont s afficher les contenus du site est enti rement personnalisable par le webmaster administrateur du site Zone de Publication Plus couramment appel e l administration du site c est l interface qui permet de g rer le site Elle n est accessible qu aux r dacteurs du site Ils peuvent en fonction des permissions qui leur sont accord es g rer l arborescence du site cr er des articles y ins rer des images ou autres documents mettre en place des forums ou des p titions Bref les possibilit s sont divers et vari es De plus aucun logiciel n est n cessaire puisque tout cela se fait au travers d un navigateur Web Mozilla Netscape Internet Explorer Etudiants EL MARNAOUI Azdine session 2005 Licence EEA P
12. e image appara t dans la colonne de gauche compl t e de plusieurs indications Etape 2 Les informations li es votre image Une fois votre image envoy e au serveur une case apparait sur la gauche de l cran Il y a l toutes les informations n cessaires qui la concernent Une partie de ces informations appara t masqu e cliquer sur le triangle pour d plier la bo te d information Affichage sous forme de vignette Une pr visualisation de votre image appara t Si l image est de grande taille plus de 200 pixels de large c est une version de taille r duite qui est affich e Raccourcis SPIP Voir ci apr s SPIP vous rappelle les 3 raccourcis qui vous permettent d ins rer cette image l int rieur de votre texte Notez que chaque image est num rot e ainsi IMGI IMG2 Ces raccourcis sont utilis s dans la troisi me tape Taille de l image Juste au dessus de l image la largeur et la hauteur de votre image en pixels ou points sont rappel es Y AJOUTER UNE IMAGE Vous pouvez installer des images aux formats JPEG GIF et PNG T l charger depuis votre ordinateur __ Browse T l charger ee eee En tant qu administrateur VOUS pouvez installer par FTP des fichiers dans le dossier ecrire upload pour ensuite les s lectionner directement ici y sans titre jpg starting blocks jpg
13. e individuelle en pla ant automatiquement le titre le texte les liens de navigation de chaque article Pour chaque type de document SPIP vous demande deux fichiers un fichier php3 et un fichier html Lors de l installation de SPIP vous trouverez ainsi les couples article php3 article html rubrique php3 rubrique html etc Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 6 25 b Le principe de fonctionnement du cache L appel d une page sp cifique se fait par l interm diaire du fichier php3 Par exemple pour appeler l article n 5 l url correspondante est http monsite net article _php3 id_article 5 1 L utilisateur appelle la page a e m article php3 id_articlesS Sfond articie Sdelais 3600 article php3 2 SPIP v rifie dans la cache s il existe d j le fichier correspond 2bis Si ce fichier existe ne 3 Si le fichier n existe pas en cache ou et si son ge est inf rieur au sil est trop ancien SPIP calcul la page d lais fix ce fichier cache ee n e E retourn 4 En fonction de E j mise en page HTML d crite par article htmi article html h SPIP int gre les FA l ments tir s de la id_artides5 HTML base de donn es dossier CACHE 5 Le r sultat est sauvegard dans un fichier en cache puis envoy a l utilisateur mySQL c Le fichier PHP3 Le fichier php3 est t
14. es intelligents Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 12 25 MODE D EMPLOI D R cup rer SPIP SPIP est disponible en t l chargement par le Web l adresse http www spip net spip dev DISTRIB Dans ce dossier vous trouverez un fichier spip zip il s agit de la version compl te de SPIP comprenant toutes les traductions existantes un sous dossier o sont d pos es les versions monolingues de SPIP identifi es par le code de la langue en deux ou trois lettres celles ci peuvent tre utiles pour minimiser l espace d h bergement occup et ou le temps de t l chargement Choisissez la version qui vous int resse d compactez l archive sur votre ordinateur dans un r pertoire de votre choix puis transf rez le contenu de ce r pertoire chez votre h bergeur via FTP ID Installer les fichiers Installez l ensemble des fichiers de SPIP sur votre site l endroit o vous voulez que le site g r par le syst me soit accessible au public le plus souvent la racine de votre site mais ce n est pas imp ratif titre d information la structure est la suivante e r pertoire racine o squelettes html nombreux fichiers php3 dossier CACHE vide dossier IMG dossier NAVPICS dossier ecrire le plus important nombreux fichiers php3 dossier AIDE dossier img_pack dossier data vide
15. imglicenter gt lt img llright gt Recopiez l un de ces raccourcis le nombre correspond au num ro de l image il change donc pour chaque fichier et recopiez le l int rieur de la case Texte l vous d sirez le situer dans votre article left aligne l image a gauche right droite et center place votre image au centre du texte Lors de l affichage l cran SPIP remplacera ces raccourcis par le code HTML correspondant en calculant automatiquement la taille des images Images avec titre et description Si vous avez indiqu un titre et ou une description les mentions sont remplac es par lt docllleft gt lt docllcenter gt lt docllright gt Elles s utilisent de la m me fa on que ci dessus cependant lorsque vous ins rez un raccourci de ce type SPIP ins re dans votre texte non seulement l image mais le titre et la description que vous lui avez donn e Votre image apparait ainsi avec ventuellement une explication et des mentions de copyright le nom de I artiste etc Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 18 25 b La partie AUTEURS 7 A B S Mb A Ee Em bd fe adne Gwe Ca ee Vous trouverez ici tous les auteurs du Les auteurs site Leur statut est indiqu parla Q couleur de leur icone administrateur vert r dacteur jaune 8 Nom Contact Atilclas
16. install vous obtenez l cran suivant E Installation EasyPHP 1 6 Linsisleur a temin l installation de EasyPHP 1 6 survotre ordinateur L application peut tre lanc e en s lectiomant les ic nes instali es COiquez sur Teminer pour qutter linstalation Ml ouvrir la page d accuel F Lancer easyphp exe Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 24 25 5 Si vous voyez l cran ci dessus c est que easyphp est bien install A pr sent nous allons voir comment lancer et ex cuter easyphp Si vous lisez bien l cran on vous indique la chose suivante Pour ouvrir le Web local ou l administration v rifiez qu easyphp exe est lanc et que les serveurs fonctionnent le point rouge de l ic ne d easyphp c t de l horloge dans la barre des t ches doit clignoter 6 Si l ic ne d easyphp c t de l horloge clignote c est que tout est ok Que faire si a ne clignote pas Faites un clic droit sur l ic ne vous devez voir appara tre l option D marrer Cliquez dessus Il se peut que cette option soit gris e et donc inactive Dans ce cas cliquez sur quitter et relancer EasyPHP Les fichiers d easyphp se trouvent dans le r pertoire Program Files easyphp INSTALLATION DES FICHIERS SPIP SUR LE WEB LOCAL Maintenant nous allons voir comment installer SPIP 7 R cup rez SPIP 8 Une fois r cup r le fichier d compressez le
17. l ment de navigation Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 8 25 1 Les crit res de s lection On utilisera l un ou autre des crit res suivants pour indiquer comment on s lectionne les l ments id_rubrique retourne la rubrique dont l identifiant est id_rubrique Comme l identifiant de chaque rubrique est unique ce crit re retourne une ou z ro r ponse id_secteur retourne les rubriques de ce secteur id_parent retourne la liste des rubriques contenues dans une rubrique racine retourne la liste des secteurs rigoureusement identique id_parent 0 id_enfant retourne la rubrique qui contient la rubrique une seule r ponse ou z ro r ponse si la pr sente rubrique est situ e la racine du site meme parent retourne la liste des rubriques d pendant de la m me rubrique que la rubrique en cours Permet d afficher les rubriques qui se trouvent au m me niveau dans la hi rarchie recherche retourne les rubriques correspondant aux mots indiqu s dans l interface de recherche moteur de recherche incorpor SPIP 2 Les crit res d affichage Une fois fix l un des crit res ci dessus on pourra ajouter les crit res suivants pour restreindre le nombre d l ments affich s Les crit res communs toutes les boucles s appliquent videmment exclus permet d exclure du r sultat la rubri
18. lles routines dans une mise en page HTML labor e est assez p nible il faut prendre en compte des probl mes de performances le recours syst matique du code mySQL et PHP est gourmand en ressources ralentit la visite et dans des cas extr mes provoque des plantages du serveur Web SPIP propose une solution compl te pour contourner ces difficult s la mise en page du site est effectu e au moyen de pages HTML nomm es squelettes contenant des instructions simplifi es permettant d indiquer o et comment se placent les informations tir es de la base de donn es dans la page un syst me de cache permet de stocker chaque page et ainsi d viter de provoquer des appels la base de donn es chaque visite Non seulement la charge sur le serveur est r duite la vitesse tr s largement acc l r e de plus un site sous SPIP reste consultable m me lorsque la base mySQL est plant e a Pour chaque type de document un couple de fichiers L int r t et la limite d un syst me de publication automatis c est que l on ne va pas red finir une interface diff rente en HTML pour chaque page isol e Par exemple tous les articles b n ficieront de la m me interface simplement le syst me placera des informations diff rentes dans ce graphisme L avantage de cette mani re de proc der est vident on d finit un format type squelette pour par exemple tous les articles et le syst me fabriquera chaque pag
19. mis d enrichir mes connaissances sur la programmation Web et m a fait d couvrir des outils tr s int ressants comme SPIP Syst me de Publication pour l Internet qui s av re tr s utile pour la construction de site J ai ainsi pu d velopper ma technique de recherche d information ainsi que mon esprit d initiative Apr s deux mois de travail je tire de cette nouvelle exp rience une grande satisfaction Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 21 25 ANNEXES Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 22 25 I Les raccourcis typographiques Ce tableau rappelle bri vement les m thodes utiliser pendant l criture d un article pour ajouter des titres du texte en gras en italique etc sans avoir conna tre HTML Fonctionnalit s M thodes Commentaires Intertitre le titre Le texte entre triples accolades est affich comme un titre Changement de paragraphe Passer une ligne Caract res gras texte en gras Le texte entre doubles accolades appara tra en gras Caract res en italique texte en italiques Le texte entre simples accolades est affich en italique Astuce pour avoir du texte en gras et en italique mettre trois accolades en ins rant une espace pour faire 1 2 et en respectant la sym trie Ex texte en
20. nt en train d y travailler il n appara t donc pas sur le site public et son acc s est limit sur le site priv Propos la publication lorsque l auteur d cide que son article est termin il le propose au comit de r daction les administrateurs et les autres r dacteurs afin de d cider s il doit tre publi ou non L article n est toujours pas visible publiquement mais tous les participants l espace priv peuvent le voir et son invit s le commenter dans un forum li a cet article Publi l article est publi sur le site public Refus l article n est pas publi Bienvenue sur le site du Master Information Syst mes Mrs Communication ISC article gt DATE DE PUBLICATION EN LIGNE 27 F VRIER 2005 7 gt LES AUTEURS 7 M azdine email 10 articles Retirer l auteur X Cet article est publi en ligne a m i en cours de r daction L objectif de la mentio etudiants dans les disciplines n cessaires la ma trise des syst mes dits intelligents La premi re ann e de Master forme aux disciplines associ es aux Sciences et Technologies de l Information et de la Communication STIC notamment l automatique et le traitement du signal ainsi que l informatique et les r seaux L originalit de la formation consiste approfondir de mani re conjointe et rapproch e les disciplines de l automatique et de l informatique par l tude des syst m
21. que dans laquelle on se trouve d j utile avec meme_parent 3 Les balises de cette boucle Les balises tir es de la base de donn es Les balises suivantes correspondent aux l ments directement tir s de la base de donn es Vous pouvez les utiliser galement en tant que crit re de classement g n ralement par titre ID_RUBRIQUE affiche l identifiant unique de la rubrique TITRE retourne le titre de la rubrique DESCRIPTIF retourne le descriptif TEXTE retourne le texte principal de la rubrique ID_SECTEUR est l identifiant du secteur dont d pend la rubrique le secteur tant la rubrique situ e la racine du site Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 9 25 Les balises calcul es par SPIP Les l ments suivants sont calcul s par SPIP Ils ne peuvent pas tre utilis s comme crit re de classement NOTES les notes de bas de page calcul es partir de l analyse du texte INTRODUCTION les 600 premiers caract res du texte les enrichissements typographiques gras italique sont supprim s URL_RUBRIQUE est URL de la page de la rubrique DATE affiche la date de la derni re publication effectu e dans la rubrique et ou ses sous rubriques articles br ves FORMULAIRE_FORUM fabrique I interface permettant de poster un message r pondant a cette rubrique PARAMETRES_ FORUM fabriq
22. r s simple Par exemple article php3 contient uniquement lt php fond article delais 24 3600 include inc public php3 gt El E Son seul but est donc de fixer deux variables fond et d lais et d appeler le fichier qui d clenche le fonctionnement de SPIP inc public php3 La variable fond est le nom du fichier qui contient la description de la mise en page le squelette Ici puisque fond article le fichier de description sera contenu dans article html Notez bien que dans la variable fond on n indique pas la terminaison html La variable d lais est l ge maximum pour l utilisation du fichier stock en CACHE Ce d lai est fix en secondes Un d lai de 3600 correspond donc une heure un d lai de 24 3600 est donc de 24 heures Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 7 25 d Le fichier HTML Dans SPIP on appel les fichiers html les squelettes Ce sont eux qui d crivent l interface graphique de vos pages Ces fichiers sont r dig s directement en HTML auquel on ajoute des instructions permettant d indiquer SPIP o il devra placer les l ments tir s de la base de donn es du genre placer le titre ici indiquer cet endroit la liste des articles portant sur le m me th me Les instructions de placement des l ments sont r dig es dans un langage sp cifique
23. re que vous irez travailler munis de vos codes d identification Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 14 25 IV L espace priv Plus couramment appel e administration du site c est l interface qui permet de g rer le site Elle n est accessible qu aux r dacteurs du site Ils peuvent en fonction des permissions qui leur sont accord es g rer l arborescence du site cr er des articles y ins rer des images ou autres documents mettre en place des forums ou des p titions De plus aucun logiciel n est n cessaire puisque tout cela se fait au travers d un navigateur Web Pour y acc der un lien est pr vu cette effet pe EE che de merde out Oe Armee cet Mhatart Chatte es hic s amizan en Le boss me rytines dts Le creme aroe ce Matte forme aux arepas pews mn Sciences ef Technelogier Ge l irformation et de ts Comemaitsmen SIC tenneri acen nque elle tramemer Ge num ey ue riora et bre reer ee TOi de Le Peat toras are Ge fn E COrphh te of ter LL Te es alpins te l nstoametique eer pur t tanie ee premas rtetg DLL ES LJ vom tee Vr res monte et en LL eh ee her 2 mt pates n s dr tam Ch OR seer ee par Se esate rive Pour acc der l espace priv e il suffit de rentrer le login et le mot de passe L cran d accueil de SPIP est relativement intuitif et de plus en fran ais ce qui facilite la compr hension
24. rojet Cr ation d un site Internet 4 25 II Pr sentation en anglais The goal of my project was to create an Internet site for the EEA students The difficulty which arose was that Mr URBAN my tutor wanted a dynamic site He thus suggested to me to use SPIP SPIP is a System of Publication for the Internet It is about a series of files installed on your Web account which enables you to benefit from a certain number of automatisms to manage a site with several people to put your articles on page without having to type HTML to very easily modify the structure of your site With the same software which is used to visit a site Mozilla Netscape Microsoft Explorer Opera SPIP makes it possible to manufacture and hold an up to date site thanks to a very simple interface SPIP makes it possible indeed to manage data bases rather simply For page setting of the contents one does not have to expect miracles of SPIP It presents the contents in a rather simplistic way Thus to build a relatively beautiful site it is necessary to remake the skeletons of presentation and thus to know the HTML language The first problem that I met was to know how SPIP ran After having understood the operation of SPIP I started to build the skeletons which are used for page setting of the site I chose a style close to the UHA site to remain in accordance to the graphic charter Moreover not having a host I worked locally in my PC The second problem
25. s et de la restaurer 1 Sauvegarder la base de donn es Il y a deux manipulations a faire sauvegarder la base des articles et des br ves Se connecter comme administrateur Interface compl te Administration du site maintenance du site sauvegarde restauration de la base Choisir sauvegarde non compress e par exemple Clic sur Sauvegarder la base Action exportation de la base vers dump xml Authentification par FTP ame Veuillez cr er un fichier o1 un r pertoire nomm l int rieur du sous r pertoire ecrire data puis recharger cette page Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 20 25 CONCLUSION Je tiens tout d abord remercier Mr URBAN qui m a permis de travailler sur ce projet qui me tenait tout particuli rement c ur premi rement par l int r t que je porte l informatique et la programmation et deuxi mement au vue de mes connaissances qui m ont permis de mener bien ce projet Le but tait donc de construire un site Internet dynamique et facile a mettre jour pour la formation EEA Challenge d sormais relev le site tant en ligne actuellement l adresse suivante http www trop uha fr master Des am liorations seront s rement utiles dans un futur proche de plus le site Internet de la licence EEA est en cours d laboration et sera op rationnel d ici peu Du point de vue technique ce projet m a per
26. s une rubrique s affichent les uns en dessous des autres dans l ordre de cr ation des articles Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 16 25 Pour ins rer une image ou un document dans un article vous devez les cr er l un des formats suivants GIF extension gif JPEG extension jpg PNG extension png Veillez particuli rement ce que le nom de vos fichiers ait une terminaison indiquant leur format gif jpg ou png Si vous installez un fichier dont le nom ne contient pas cette extension le syst me ne saura pas utiliser l image Etape 1 Installation des images sur le serveur Avant de pouvoir ins rer vos images l int rieur du texte il faut bien entendu installer ces images sur le serveur Cela se fait dans SPIP par V interface graphique Lorsque vous modifiez un article ou une br ve la colonne de gauche vous propose une interface intitul e Ajouter une image Cela se pr sente sous la forme d un champ suivi d un bouton nomm suivant les navigateurs parcourir Browse S lectionner File Fichier Lorsque vous cliquez sur ce bouton une interface s ouvre vous permettant de visiter votre disque dur et d indiquer quel fichier graphique vous voulez s lectionner Cela fait cliquez sur le bouton intitul T l charger Si l op ration a r ussi votr
27. site puisque c est autour de cette structure que viendront se greffer les diff rents l ments de votre site articles br ves sites syndiqu s Ci dessous les rubriques du site sont repr sent es l aide des ic nes en forme de cartons et sont donc des secteurs ces rubriques d finissent les grands secteurs th matiques du site Les sous rubriques sont repr sent s l aide des ic nes en forme de dossier et pour finir les articles sont repr sent s par les ic nes en forme de carr Voici la structure hi rarchique du site pour laquelle j ai opt M M Bienvenue sur le site du Master Information Syst mes Communication ISC E Pr requis B Recrutement M Analyse des flux N E M2R Sp cialit Recherche E M2P Sp cialit Professionnelle E M1 Sp cialit Professionnelle et Recherche E Plan du campus de Mulhouse G v Acc s Ville de Mulhouse C ville de mulhouse E Presentation de la sp cialit 2 Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 11 25 b Les articles Un article se trouve dans une rubrique Cela se g re tr s simplement par un menu d roulant Notez qu une rubrique contenant elle m me des sous rubriques peut parfaitement recevoir des articles La seule subtilit des articles c est leur statut Un article peut tre En cours de r daction son ou ses auteur s so
28. sur votre disque et copiez les fichiers dans un r pertoire TestSpip que vous aurez pr alablement cr dans C Program Files easyphp www 9 Lancer votre Web local 10 Cliquez sur le lien TestSpip vous devez obtenir l cran suivant Site en travaux Ce ste nest patencore configurer Revener phe tant Etudiants EL MARNAOUI Azdine session 2005 Licence EEA Projet Cr ation d un site Internet 25 25 11 Il est normal que l cran suivant s affiche SPIP n est pas encore configur CONFIGURATION DE SPIP L installation a t assez rapide et la configuration le sera tout aussi 12 Dans la barre d adresse inscrivez la fin de la commande ecrire donc vous devez avoir http localhost TestSpip ecrire voir sch ma ci dessous ton Affchoge Feos Outs O i GD Arene Ypres Sue O LC YG At esse h tp imanuel TestSopiecrre lt pour configurer wo Site en travaux Ce site n est pas encore configur Revenez plus tard 13 Validez votre commande et vous devez obtenir l cran suivant rer Lame tnp fun Cane or O DE pet G LS TL TGS EL eet v Installation du systeme de publication spip Sirians we bapa pute rigan ar b boucua srant pour Lawer be preotdure f netallacion 14 Ensuite le reste est tr s simple il vous suffit de suivre les instructions donn es l cran Etudiants EL MARNAOUI Azdine session 2005
29. ue la liste des variables exploit es par l interface du formulaire permettant de r pondre a cette rubrique Par exemple Le logo LOGO_ RUBRIQUE le logo de la rubrique ventuellement avec la gestion du survol S il n y a pas de logo pour cette rubrique SPIP va automatiquement chercher s il existe un logo pour la rubrique dont elle d pend et ainsi de suite de mani re r cursive Le logo s installe de la mani re suivante LOGO_RUBRIQUElalignementladresse LOGO_RUBRIQUE NORMAL affiche le logo sans survol LOGO_RUBRIQUE_SURVOL affiche le logo de survol ces deux balises permettent par exemple quand on est dans une rubrique de g rer un logo avec survol pour les liens vers les autres rubriques et de laisser le logo de survol seul dans la rubrique active e Une interface diff rente dans le m me site Tout d abord notez qu il est possible de cr er des couples de fichiers pour le m me l ment logique articles rubriques Par exemple vous pouvez cr er des fichiers pour visiter un m me article avec des interfaces diff rentes article php3 html pour le format normal imprimer php3 html pour le m me article dans un format adapt l impression article texte php3 html pour l article dans un format texte adapt aux malvoyants par exemple article lourd php html avec une interface lourdingue adapt e au haut d bit etc Une interface diff rente selon les rubriques Vous pouve
30. z pour un m me type de document cr er des squelettes diff rents selon les rubriques du site Il s agit de cr er simplement de nouveaux fichiers html en fonction des rubriques inutile ici de modifier le fichier php3 on se contente de jouer sur les noms des fichiers squelettes Il suffit de compl ter le nom du fichier squelette de num ro un tiret suivi d un num ro de rubrique Par exemple si vous cr ez un fichier article 60 html tous articles contenus dans la rubrique n 60 utiliseront ce squelette et non plus le squelette par d faut article html Notez bien le num ro indiqu est celui d une rubrique Si cette rubrique 60 contient des sous rubriques les articles contenus dans ces sous rubriques utiliseront galement le nouveau squelette article 60 html Etudiants EL MARNAOUI Azdine session 2005 10 25 Licence EEA Projet Cr ation d un site Internet II Les l ments g r s par SPIP a La hi rarchie des rubriques Une rubrique est un espace destin accueillir des articles des br ves Les rubriques peuvent tre install es les unes dans les autres formant ainsi une hi rarchie Une rubrique est soit l int rieur d une autre rubrique soit elle n est rattach e aucune autre et constitue alors un point d entr e dans le site nous parlons alors de t te de rubrique ou de secteur L emboitement des rubriques les unes dans les autres constitue l ossature de votre
Download Pdf Manuals
Related Search