|
Système d'information de l'intelligence territoriale( Télécharger le fichier original )par Hamid Bouaiche Université A/R Mira de Bejaia - Master II recherche 2010 |
CHAPITRE DEUX« Mission de la réalisation du SIIT » La conception et la réalisation d'un SI doit se faire avec l'une des méthodes de travail qui existent, pour notre cas nous avons choisi la méthode merise qui se caractérise par la facilité et la simplicité. La conception consiste à représenter par des schémas et des modèles propres à la méthode, la réalité du système étudié. Parmi les SI les plus courants, on trouve les systèmes des organismes bien structurées, ce qui n'est pas du tout notre cas où l'on fait face à un territoire. A cet effet, le territoire est considéré comme une organisation et les acteurs de ce territoire comme des services de cette organisation. Le SIIT met en connexion les différents acteurs qui coordonnent leurs activités dans la perspective d'atteindre l'objectif de l'intelligence territoriale. Cette dernière peut être assimilée par analogie, à l'objectif de maximisation du profit les organisations économiques. Le présent chapitre est divisé en deux sections, la première traite la conception du SIIT et sa réalisation, et la deuxième traite les moyens logiciels que nous avons utilisés. On sous entend par la réalisation, la concrétisation de la base de données et l'application qui font toutes les deux le site web dynamique.
65 Une méthode est un ensemble de démarches raisonnées suivies pour parvenir à un but donné. L'objectif des méthodes de conception et, de développement de système d'information est de représenter une démarche et un ensemble de modèles permettant de mettre en place un nouveau système, il existe plusieurs méthodes à l'instar de Merise, Axial, E/R Chen, . . .etc. Quel que soit la méthode choisie pour la conception du SI, celle-ci s'articule évidemment autour des étapes suivantes : Etude préalable, étude détaillée, conception, réalisation et mise en oeuvre, tests et jeux d'essais, et enfin la maintenance. 1. Description de la méthode Merise1 Merise est née vers la fin de l'année 1976 suite au lancement du ministère de l'industrie français d'un projet en collaboration avec : o Le centre d'études technique de l'équipement d'Aix-en-province o Un certain nombre de sociétés de services et de conseil en informatique o Et de nombreux universitaires Merise fait une nette séparation entre les données (vision statique) et les traitements (vision dynamique) et propose trois modèles Merise propose deux approches pour concevoir un SI 1. 1 Schéma directeur Décomposition de l'activité de l'entreprise ou de l'organisation en domaines d'activités. Cette étape permet de diviser le problème à résoudre en sous problèmes afin d'éviter de se plonger dans des situations d'encombrement et de confusion entres les flux d'informations. 1 Voir : Aloui h, conception et réalisation d'un SI pour la gestion des cités universitaires, université de Bejaia, 2007, cote :004A/39, P 02.
1.1.1 Etude préalable Etude approfondie de chaque domaine d'activité en essayant de répondre aux questions suivantes : o Est-t-il possible d'automatiser le domaine étudié ? o Quel est le bilan économique du projet ? o Est-t-il possible de décomposer une autre fois le domaine étudié en sousdomaines autonomes ? 1.1.2 Etude détaillée Lors de cette étape, elle sera décrite de façon détaillée la solution à réaliser, un cahier des charges sera élaboré pour permettre aux utilisateurs de prendre connaissance du future système et cela en traçant des maquettes d'écran et des états d'édition. 1.1.3 Réalisation La phase de la réalisation est organisée en deux étapes qui sont o L'étude technique qui consiste à décrire l'organisation physique des données en spécifiant le type du support à utiliser, les droits d'accès,....etc, et l'organisation physique des traitements en spécifiant leurs architecture. o La production du logiciel qui consiste à produire le programme et de le tester 1.1.4 Mise en oeuvre La mise en oeuvre du logiciel est l'ultime étape de la création du système d'information, cette étape est constituée par : o La création et l'initialisation des bases de données o Réception et initialisation du nouveau matériel informatique o Rédaction des manuels d'utilisation pour les futurs utilisateurs o Formation des nouvels utilisateurs en nouvelles applications o Lancement de nouvelles applications en parallèle avec les anciennes o Lancement définitif des nouvelles applications
67 1.1.5 Maintenance La maintenance du système va permettre de le faire vivre et de le mettre à niveau jusqu'à la fin de son cycle de vie au fur et à mesure que l'environnement s'étend et évolue. Le système réussira à survivre avec les mises à niveau et grace aux modifications qui seront apportées à l'application ainsi qu'à la base de données. 1.2 Approche par niveaux Cette approche vise à concevoir le SI de chaque domaine de l'entreprise en modélisant les domaines et traitements du système2.
Niveau Préoccupation Modèles
Tableau n° 02 : présentation de la méthode merise par niveaux3 2 Durant la conception du SIIT, les modèles présentés dans le tableau ne sont pas tous développés. Du point de vue de leurs importance, les modèles qu'ils soient physiques ou logiques, sont tous utiles et un présentent un outil de méthodologie incontestable. Les flux d'information qui circulent dans un territoire sont infinis et ainsi notre cas d'études doit être limité a des cibles bien déterminées. Notre chois c'est porté sur les annonces publiées par les acteurs du territoire ainsi que sur les activités d'animation qu'ils organisent. Dans les perspectives du développement de ce projet de SIIT, les modèles doivent être dévellopés. 3 Voir : Aloui h, conception et réalisation d'un SI pour la gestion des cités universitaires, université de Bejaia, 2007, cote : 004A/39, P 02.
69 2. Schémas et modèles du SIIT Les modèles présentés sont le MCD et le MLD. On considère qu'ils sont les plus importants par rapport à notre thème de recherche. 2.1 Postes de travail Par analogie à l'entreprise économique qui est constituée d'un ensemble de postes de travail, un territoire est composé d'un ensemble d'acteurs. Dans le chapitre précédent, nous avons recensé les différentes catégories d'acteurs suivants : 2.1.1 Collectivités locales Les collectivités locales est un poste qui se caractérise par la prise de décision sur les projets de développement local et de l'aménagement du territoire. 2.1.2 Entreprises économiques Les organisations économiques sont les meneurs et les réalisateurs des projets de développement, ils représentent la source de la richesse de la région. Par rapport à la collectivité locale, une entreprise réalise des projets alors que celles-ci décident de ce qui doit être réalisé 2.1.3 Associations Dans le premier chapitre de ce travail, il a été montré qu'un territoire est une source de valeurs. Les associations ici contribuent sur le volais culturel et social, ces organisations à but non lucratif sont financées économiquement par les deux postes précédents. 2.1.4 Communauté locale La population intervient comme un acteur externe dans le système. L'intervention de la population locale est en quelques sortes passive car elle n'est pas connectée aux autres. 2.1.5 Etablissements de formation C'est la dernière catégorie d'acteurs, Les établissements de formation constituent l'entité qui fait le management de la connaissance. 2.2 Modèles du SIIT 2.2.1 Modèle conceptuel des données (MCD)
Figure N° 04 : Modèle conceptuel de données (MCD)
o Une organisation remplit une et une seule fiche d'information o L'administrateur reçoit plusieurs fiches d'informations o L'administrateur inscrit plusieurs utilisateurs o Un utilisateur peut publier une ou plusieurs annonces o Un utilisateur peut publier une ou plusieurs activités d'animation o Un utilisateur peut envoyer un ou plusieurs messages à d'autres utilisateurs o L'administrateur publie une ou plusieurs actualités o Un visiteur peut envoyer un ou plusieurs messages à l'administrateur 2.2.2 Modèle physique de données (MPD) Le modèle physique de données constitue le dernier modèle de données à construire dans la méthode merise. On retrouve ce modèle au troisième niveau de l'approche par niveaux qui est le niveau physique. A ce stade, il s'agit de représenter le modèle logique de données (MLD) en une base de données qui sera implémentée dans une machine. Le MPD prend en considération les ressources physiques ce qui répond à la question « avec quel moyen ? » Les différentes tables sont présentées sous leurs formes réelles sur l'éditeur de bases de données PhpMyadmin. Le type et la taille des champs sont présentés dans la même colonne type. Le champ Null décrit s'il peut recevoir ou non le champ vide, et auto_increment est une fonction de phpsql qui ajoute à chaque fois une unité à la valeur précédente du champ.
71 o Table administrateur : contient trois champs : numadmin (numéro du compte d'administrateur), identadmin (itdentifiant de l'administrateur), paswdadmin(le mot de passe de l'administrateur)
Tableau N°03 : représentation physique de la table administrateur o Table actualité
Tableau N°04 : représentation physique de la table actualité o Table annonce
Tableau N° 05: représentation physique de la table annonce
73 o Table Message
Tableau N°06: représentation physique de la table Message o Table utilisateurs
Tableau N°07 : représentation physique de la table utilisateurs o Table activité
Tableau N°08: représentation physique de la table activité o Table fiche
Tableau N°09 : représentation physique de la table Message 2.2.3 Modèle logique de données (MLD) Le modèle logique des données consiste à décrire la structure de données utilisée sans faire référence à un langage de programmation. Il s'agit donc de préciser le type de données utilisées lors des traitements. Autrement dit, le MLD est une traduction du MCD dans un formalisme compréhensible par la machine. actualite (numact, datact, sujetact, idadmin*) annonce (numan, datan, sujetan, textan, iduser*) activite (numactiv, datactiv, sujetactiv,lieuactiv,descactiv, idtuser*) fiche (nomorg,typorg,typact,telephone,adresse,email,sitweb,ident,paswd) message (numme, iduser_r, iduser_e, objetme, sujetme, datme) user (iduser, paswduser, indic, nomorg*) admin (idadmin, paswdadmin)
75
77
79 2.2.4 Organigramme de l'application
Figure N°05 : organigramme de l'application Le présent organigramme présente le mode d'utilisation du SIIT une fois qu'il est mis oeuvre. Les utilisateurs inscrits et les visiteurs ont accès sur le même portail, l'administrateur aura son propre domaine d'accès. L'organigramme montre aussi les différents droits d'utilisation des données disponibles sur le site. Le « R, read » permet la lecture, le « W, write » permet l'écriture et le « D, delete » permet la suppression. 3. Solutions techniques Dans ce point, nous allons présenter les solutions techniques pour la réalisation de notre projet. Comme nous l'avons présenté dans le point 2.3.2 du second chapitre, les solutions sont diverses mais pour notre cas, la solution idéale reste le réseau internet. Donc nous allons faire face à la conception d'un site web dynamique qui sera hébergé sur le web. 3.1 Présentation du site Le site que nous allons développer va répondre aux objectifs du SIIT cités dans le chapitre précédent. Certes, ça ne reste pas facile de concrétiser la totalité des objectifs mais le développement du site va se faire au fil du temps avec les expériences qui seront tirées à travers son utilisation (SIIT). 3.1.1 Rubrique indexe4 C'est la première page qui s'affiche en tapant l'URL du site dans un navigateur web. C'est une page affiche les éléments suivants o Une barre de navigation pour explorer les rubriques du site o L'actualité du territoire o Les offres d'emploi o Un espace publicitaire o Une zone de cession pour connexion des acteurs L'actualité du territoire et les offres d'emploi sont des informations auxquelles le visiteur aura accès. Les offres d'emploi vont permettre aux visiteurs de trouver un emploi dans la région, les offres sont émises par les acteurs depuis leurs espaces personnels. Quant à l'actualité, c'est l'administrateur du site chargé de la mise à jour de publier les actualités sur cette page. 4 Voir annexe 09 Les objectifs de cette rubrique sont d'ordre économique et social pour les offres d'emploi et les espaces publicitaires. Quant à l'actualité, c'est en réponse au besoin en information actuelle. 3.1.2 Rubrique utilisateurs5 C'est un espace privé qui sera consacré aux acteurs du territoire. C'est une sorte de forum dans lequel les acteurs auront rendez-vous pour s'échanger les intérêts qu'ils partagent. Une association par exemple peut émettre une recherche de sponsor, une entreprise annonce sa naissance, une collectivité locale annonce l'aménagement d'un territoire, etc. Cette rubrique affiche également la messagerie des acteurs, les messages reçus de la part des utilisateurs du site y compris les visiteurs. Les éléments affichés sont : o Messages reçus o Messages envoyés o Forum d'utilisateurs o Envoi de messages o Interrogation de la base de données o Publication d'annonces Nous avons préféré protéger cette rubrique et la restreindre seulement aux acteurs qui sont inscrits pour pouvoir suivre les informations publiées sur le site. Les utilisateurs seront inscrits suite à une enquête sur les informations qu'ils envoient sur leur fiche d'inscription. 3.1.3 Rubrique administrateur6 L'espace administrateur est constitué d'une interface qui a l'accès totale à la racine du site (fichiers et bases de données). L'administrateur dispose de tous les droits d'utilisation (R.W.D). 5 Voir annexe 08 6 Voir annexe 07 La page administrateur est accessible en se connectant à un sous domaine du site, elle n'est pas du tout accessible par les différentes pages. 3.2 Barres de navigation Les barres de navigation permettent à l'utilisateur de surfer sur le site sans perdre la référence, elle permet d'aller de page en page et de faire des raccourcis vers les pages qui sont sur un niveau élevé dans l'arborescence des fichiers. Les différentes rubriques du site disposent chacune d'une barre de navigation personnalisée dans les menus. Nous disposons de trois rubriques ce qui fait que nous aurons à développer trois barres les trois barres suivantes : 3.2.1 Barre de navigation visiteur La barre est dotée des éléments suivants : o Accueil (index. php) o Qui sommes-nous (Qui sommes nous. php) o Actualité (requête SQL) o Offre d'emploi (requête SQL) o A propos de l'IT (Science. php) o Economie (Economie.hph) o Santé (Santé. php) o Histoire (Histoire. php) o Culture (culture. php) o Ecologoe (ecologoe. php) o Faire confiance à l'IT (faire confiance. php) o Cont@ct (Contact.php) 3.2.2 Barre de navigation utilisateur La barre est dotée des éléments suivants : o Accueil du site (index. php) o Accueil (/acteurs/index.php) o Consulter annonce (requête SQL) o Ajouter activité (requête SQL) o Consulter activité (requête SQL) o Ajouter annonce (requête SQL) o Envoyer message (requête SQL) o Messages reçus (requête SQL) o Coordonnées (requête SQL) o Rechercher (requête SQL) o Cont@ct (Contact.hph) 3.2.3 barre de navigation administrateur La barre est dotée des éléments suivants : o Accueil (/admin/index.php) o Fiches reçus (requête SQL) o Demandes d'informations (requête SQL) o Demandes d'emploi (requête SQL) o Ajouter utilisateurs (requête SQL) o Ajouter Actualités (requête SQL) o Utilisateurs enregistrés (requête SQL) o Fiches (requête SQL) o Messages (requête SQL) o Annonces publiées (requête SQL) Nous n'avons pas précisé les tâches des différents postes de travail car celles-ci sont indénombrables. Ainsi nous nous sommes limités à la publication et la consultation des annonces et des activités d'animation pour les trois premiers postes, et l'envoi des messages à l'administrateur pour le dernier poste qui est la communauté locale des résidents du territoire.
La présent section est destinée à offrir une vue plus précise et plus rapprochée sur les logiciels utilisés pour la réalisation de notre projet. Les trois premiers logiciels sont tous conçu par le géant du logiciel ADOBE. Ils sont destinés à des utilisations professionnelles et exigent du pré requis sur le domaine de la programmation ainsi que de la conception graphique. Bien que ceux-ci aient une interface qui offre des facilités d'utilisation, cependant l'utilisateur doit apporter des retouches en retouchant à la main le code source. Il est à noter que de préférence la création d'un site web doit d'abord commencer par la création des dossiers qui vont contenir les fichiers de ce site. On crée un répertoire principal qui va contenir la page d'accueil du site « index » et les autres dossiers pour les photos, les vidéos, les animations, etc. 1. Macromedia Dreamweaver Dreamweaver est un logiciel de programmation des sites web. Il donne la possibilité d'utiliser plusieurs langages comme HTML, PHP, Java Scripts, ASP, XML et bien d'autres. L'utilisateur travail sur une interface simplifiée qui utilise les fonctions du traitement de texte et le logiciel se charge de transformer le travail en un code HTML qui sera reconnu par les serveurs et les navigateurs de l'internet. Il reste la solution complète pour les professionnels de la conception des sites web car il offre un environnement de travail agréable. 1.1 Présentation En lançant Dreamweaver, il affiche l'interface représentée dans la figure (08).
Figure N° 06 : interface d'accueil de dreamweaver 8
81 1.2 Utilisation de Dreamweaver 1.2.1 8zIONIQEIANQ E1IVE ( Un site internet est un ensemble de pages qui sont reliées entre elles par des liens hypertextes. Les pages quant à elles contiennent des fichiers de toutes sortes. Pour concevoir une bonne organisation, il est conseillé d'enregistrer les fichiers dans des dossiers de façon à leur donner une organisation logique. Par exemple regrouper dans chaque dossier, les images, les vidéos, les pages web, les scripts, etc. Dreamweaver contient un assistant qui permet de créer un site web, il suffit de le suivre en cliquant sur suivant et en portant ses choix. Cependant, l'utilisateur peut créer sa propre arborescence. Pour créer une arborescence propre à son cas, il faut créer un dossier racine qui va contenir impérativement la page nommée « index » du site, celle qui s'affiche en tapant l'adresse du site dans un navigateur web. Ensuite, on crée des dossiers qui vont regrouper les différents fichiers. Cette organisation est utile pour ne pas encombrer le dossier racine et de permettre des mises à jour rapides et faciles. 1.2.2 Créer une page web Toute page web est éditée par le langage HTML qui est un langage standard. Les autres langages sont caractéristiques de fonctionnalités avancées qui sont présentées dans le deuxième chapitre de la première partie. Dans l'interface précédente, illustrée par la figure (08) il suffit de choisir le langage à utiliser puis de cliquer sur son lien. Dreamweaver affiche la page suivante :
Figure N° 07 : interface de document dreamweaver8
83
85
1.3 Organisation du site Dans un aperçu global, il apparait facile de concevoir une page web, les difficultés ne tardent pas surgir une fois que les pages deviennent nombreuses et les besoins à satisfaire évoluent suite à l'innovation technologique. Les sites statiques sont faciles à réaliser du fait que les pages de celui-ci sont construites au préalable et sont les mêmes pour chaque utilisateur. Par contre un site web dynamique peut être constitué d'une seule page qui se charge par différentes manières de façon à afficher les éléments souhaités par le visiteur, en effectuant des sélections sur les menus de la page d'accueil. Pour commencer à organiser son site web, il faut se mettre à la place du visiteur qui va visiter le site et ensuite penser à lui faciliter l'accès à toutes les données qui peuvent s'y trouver. Les données peuvent être organisées de différentes manières, mais il existe toujours une solution qui permet au visiteur de consulter toutes les données souhaitées sans parcourir tout le site. Un autre paramètre à prendre en considération, s'est bien sur de mettre en avant les besoins de propriétaire du site, ce qu'il veut réaliser, ce qu'il veut atteindre. 1.3.1 Répartition de la page Pour rappeler le principe du fonctionnement du HTML, celui-ci est un langage de balises, ce qui signifie qu'une page web est réellement un ensemble de zones, qui contiennent chacune d'elles un texte, une image, un lien, etc. Donc pour créer les zones précédentes, on doit en réalité créer des balises. Une fois la balise est crée, elle s'affiche sur l'environnement création comme une zone de texte ou l'on peut écrire du texte, insérer des objets, etc. Pour éviter l'anarchie dans l'affichage, il faut considérer la page comme un ensemble de zones qui ont des comportements différents. En général la zone du haut et de la gauche de la page sont réservées à des éléments fixes comme des images de l'arrière plan, les barres de navigation, les animations flash et les espaces publicitaires. Les autres parties de la page peuvent être consacrées à l'affichage des résultats de recherche du visiteur. Une fois la conception de la page d'accueil à été choisie, il suffit de la copier autant de fois que le site contient de rubriques, ensuite renommer chacune d'entre elles avec le nom de la rubrique relative, insérer les liens hypertextes entre les pages, par la suite il reste à personnaliser le contenu de chaque page (ceci est le cas d'un site statique). Il est utile de choisir cette méthode car le concepteur ne doit enregistrer les objets qu'une seule fois. Au moment dont les pages se chargent, elles appellent tous les mêmes objets. Pour un site dynamique, le concepteur a à concevoir qu'une seule page pour le site qui se charge directement de sa base de données. La tâche principale dans l'organisation est de choisir les zones statiques et les zones dynamiques de la page. 1.3.2 La barre de navigation La barre de navigation décrit en quelques sortes l'arborescence du site, elle peut contenir les rubriques importantes du site. Pour insérer une barre de navigation sur Dreamweaver, il suffit d'aller sur mise en forme et de choisir quel type de barre à insérer, horizontale ou verticale, cela dépend beaucoup plus de la conception graphique du site. Par défaut, Dreamweaver offre une barre à quatre éléments, pour supprimer ou ajouter les éléments à la liste, aller sur le menu propriétés au dessous de la page et d'apporter les changements souhaités. Pour modifier le comportement de la barre sur le navigateur, comme le changement de la couleur, la surbrillance du texte, aller sur les propriétés CSS. Etant que la barre de navigation est un élément dynamique qui nécessite des scripts, ceux-ci sont créés par Dreamweaver automatiquement et qui sont enregistrés dans le répertoire racine dans deux dossiers « scripts » et « SpryAssets ». 1.3.3 Insérer un texte Ecrire un texte sur une page web reste la tâche la plus facile, l'utilisateur n'a qu'à créer une balise et puis d'y écrire son texte. Sur l'environnement code , créer la balise : <div id= ''apDivN°debalise»> écrire le texte </div> Toutes les balise ont un numéro qui les identifie, si nous venons de créer la première balise, et qu'on veut souhaiter la bienvenue au visiteurs le code sera le suivant : <div id= ''apDiv1> nous vous souhaitons la bienvenue </div> Sur l'environnement création, pour écrire un texte, créer d'abord une balise avec le menu « mise en forme », ensuite écrire le texte. Les propriétés CSS ou de mise en forme du texte comme le gras, l'italique, la taille, la couleur, se trouvent sur le menu « texte ».
On comprend directement l'avantage de l'environnement création, c'est que dans cet exemple, au lieu d'écrire la balise dans l'environnement code, Dreamweaver la créée avec un simple clic dans l'environnement création. 1.3.4 Insérer une image Contrairement au texte qui est contenu dans le code source, l'image est un fichier enregistré quelques parts auquel la page fait appel au moment dont elle se charge. La première chose à faire est de porter les modifications nécessaires à l'image afin qu'elle puisse s'insérer exactement dans l'espace qui lui sera réservé, ensuite l'enregistrer dans le dossier image du site. Une fois l'image est contenue dans le répertoire du site, il faut la copier et puis la coller directement sur une balise de la page. L'assistant Dreamweaver demande de donner un titre et une description à l'image, ces informations ne sont pas impératives. Elles permettent aux moteurs de recherche de les détecter et de réorienter le visiteur vers le site ou cette image peut se trouver. Au moment de l'insertion de l'image, si celle-ci n'est pas encore enregistrée dans le répertoire du site, Dreamweaver vous demande de l'enregistrer sous l'un des dossiers du répertoire racine du site. Dans le cas où cette image à été enregistrée dans un autre dossier appart, elle sera toujours reconnue sur la machine du concepteur, une fois le site déplacé ou hébergé sur le web, la page va appeler l'image toujours dans sur son ancienne adresse et ainsi, l'image ne pourra plus être trouvée. Les images ont une taille importante, ainsi, il est préférable de les enregistrer sous le format GIF. Ce format garde la netteté de l'image et réduit largement sa taille. Il existe un format qui est les GIF animées, ce sont des images qui ont un comportement dynamique. Ce genre d'images affiche plusieurs images dans un seul emplacement. Les GIF animées sont d'une grande importance, elles permettent d'insérer des animations sans avoir recours aux scripts java des animations flash. Il existe une multitude de logiciels qui permettent de créer les images GIF animées, on
87
trouve GIF ANIMATOR de Microsoft, PHOTO EXPRESSE, BENETON ANIMATOR GIF, etc. 1.3.5 Insérer un objet animé Les objets animés offrent une belle conception au site web. En principe, il existe deux formats « .GI F » et « .SWF » qui sont supportés par les navigateurs du web. Les fichiers « .GIF » sont définis dans le point précédent, ce sont des images, de petite taille et n'ont besoin d'aucun autre fichier annexe pour fonctionner. L'inconvénient des « GIF » c'est qu'elles ne sont pas tout à fait nettes, leur comportement ne peut pas être contrôlé et ne peuvent pas supporter deux animations dans la même séquence. Les fichiers « .SWF » sont des animations qui peuvent être reconnue par les navigateurs du web, à condition que le support « Flash Player » soit installé au préalable sur la machine. Les animations qu'on trouve sur les sites web sont presque toutes de se format « .SWF » car elles présentent les solutions complètes au besoin de l'animation. L'insertion d'une animation « .GIF » est identique à celle de l'image. Pour insérer une animation « .SWF », après l'avoir conçue (la conception est expliquée dans les points suivants), suivre les mêmes procédures de l'insertion de l'image, à la fin de l'opération, Dreamweaver vous informe qu'il a crée les fichiers nécessaires au fonctionnement de l'animation et ceux-ci (les fichiers) sont enregistrés dans le dossier « scripts » Il n'est pas évident que l'animation soit directement opérationnelle contrairement aux images GIF animées. Dans ce cas, il faut revoir le code source de l'animation et remplacer la zone « noscript » par « ActionScript 2.0 » ou « ActionScript 1.0 ». Dans le cas ou l'animation s'affiche en double, il faut remplacer la zone « texte javascript » par « no script » du code source de l'animation toujours. Les animations flash ont l'inconvénient de nécessiter le « flash Player » qui ne se trouve pas chez la majorité des machines, elles peuvent ne pas fonctionner sur les anciennes versions des navigateurs web, elles peuvent stopper les processeurs de moins de 1 GHZ. 1.3.6 Insérer une vidéo Pour préparer la vidée, il existe des logiciels spéciaux qui sont utilisés pour ce genre de fichiers. Le plus répandu et le plus utilisé est le MACROMEDIA FLASH, celui-ci sera présenté dans les points suivants. Pour insérer une vidéo, il faut la convertir dans les formats que le logiciel flash puisse supporter et une fois celle-ci est prête, il ne reste qu'à suivre les même procédures que celle des animations « .SWF »
89 2. Macromedia Fireworks Macromedia Fireworks est le logiciel conçu par ADOBE pour la conception graphique des pages web. Les éléments graphiques que peut contenir une page web peuvent être un arrière-plan, des boutons, des barres de navigation, des images, etc. L'importance de l'utilisation de ce logiciel est premièrement ses fonctionnalités développées mais aussi le fait qu'il travail mutuellement avec Dreamweaver, internet explorer et le Macromedia flash. C'est-à-dire que par exemple : au moment que l'on apporte des changements à l'arrière-plan, on peut le visualiser directement sur les autres logiciels. 2.1 Utiliser Fireworks L'interface de Fireworks est semblable à celle de Dreamweaver présentée cidessus. En lançant le logiciel Fireworks, il affiche la fenêtre montrée par la figure 08.
Figure N° 08 : interface d'accueil de Fireworks 8
2.2 Créer un document
Les paramètres à prendre en considération généralement pour document sont ses dimensions, sa concentration en pixels et résolution. Pour les deux premiers, l'extension et la concentration en pixels, ils peuvent être manipulés sur la barre de dialogue qui s'affiche juste après avoir cliqué sur nouveau document (la barre de dialogue est illustrée par la figure 11). Ces paramètres peuvent aussi être modifiés lors du traitement du document en allant sur taille du document qui se trouve sur la figure 12. Figure 09 : illustration de la barre de dialogue de Fireworks
s'affichant juste avant la création
91 Pour l'extension, l'utilisateur peut choisir l'extension adéquate lors de l'enregistrement du document. Si le document est en cours de création, il est indispensable de l'enregistrer sous le format PNG car celui-ci ne fusionne pas les claques. Une fois le document est achevé, il doit être enregistré sous le format PNG dans un dossier de sauvegarde pour des éventuelles modifications, et sous le format GIF pour l'insérer dans le site web.
Figure 10 : illustration d'une partie inférieure de
l'interface de Fireworks lors de la 2.3 Principales fonctionnalités de Fireworks Fireworks est logiciel qui peux rendre de très grand services à la conception graphique des pages web. On commence par le traitement de l'image, souvent les images et les photos qu'on collecte pour les publier sur le web ont besoins de quelques retouches, ces traitements peuvent être un redimensionnement, une découpe, un assemblage de plusieurs éléments, un changement de l'extension, etc. En deuxième lieu, Fireworks offre la possibilité de créer des documents professionnels tels que les arrières plan, les fonds d'écran, les boutons, les maquettes, etc. Le logiciel permet avec sa table d'outils et d'éléments CSS de créer n'importe quelle forme géométrique, de la colorier, de la couper, en somme il n' suffit qu'àimaginer et le reste se fait avec ce logiciel. Il existe aussi la possibilité de créer des éléments dynamiques comme les boutons flash et les objets animés. 2.3.1 Dessins Le panneau Outils de Fireworks, organisé en sections, regroupe des outils de dessin et d'édition spécifiques aux objets vectoriels et bitmap. L'outil que vous sélectionnez détermine si l'objet que vous créez est un objet vectoriel ou bitmap. Après avoir dessiné un objet ou tracé du texte, toute une gamme d'outils, d'effets, de
commandes et de techniques sont à votre disposition pour enrichir vos graphiques ou créer des boutons de navigation interactifs. On peut également importer et modifier des images, notamment aux formats JPEG, GIF, PNG et PSD. 2.3.2 Création de symboles de bouton Les boutons sont un type particulier de symbole, utilisés comme éléments de navigation dans une page Web. L'inspecteur des propriétés permet de modifier facilement les boutons. Vous pouvez faire glisser dans votre document des occurrences d'un bouton depuis la bibliothèque de symboles, ce qui vous permet de modifier l'aspect graphique d'un seul bouton et de mettre à jour systématiquement l'aspect de toutes les occurrences du bouton dans la barre de navigation. o Presque tous les objets graphiques ou texte peuvent devenir un bouton. Pour créer un bouton ou convertir un objet existant en bouton, suivez les étapes décrites à la section Création d'un symbole, puis sélectionnez Bouton comme type de symbole. Pour importer des boutons existants, reportez-vous à la section Importation et exportation de symboles. o Vous pouvez modifier le texte, l'URL et la cible d'une occurrence de bouton sans affecter ses autres occurrences, ni rompre le lien entre cette occurrence et son symbole. o Une occurrence de bouton est un objet encapsulé.
Fireworks déplace tous les o Tout comme les autres symboles, chaque bouton dispose d'un point d'alignement (point central servant de repère pour aligner du texte et les différents états du bouton quand vous éditez un bouton). 2.3.3 Menus contextuels Les menus contextuels s'affichent dans un navigateur en réponse à un événement souris (survol ou clic) sur un objet Web de déclenchement tel qu'une tranche ou une zone sensible.
93 o Chaque élément de menu contextuel s'affiche en tant que cellule d'image ou HTML. La cellule est associé aux états Relevé et Au-dessus et contient du texte dans les deux cas. o Vous pouvez affecter des liens URL à des éléments de menu contextuel pour la navigation et créer autant de niveaux de sous-menus que vous le souhaitez dans un menu contextuel. o Vous pouvez utiliser certains onglets ou tous les onglets et modifier leurs paramètres à tout moment. o Vous devez ajouter au moins un élément de menu dans l'onglet Contenu pour créer une option de menu que vous pouvez pré
visualiser dans un navigateur. menus contextuels ne s'affichent pas dans l'espace de travail de Fireworks
3. Macromedia Flash Lorsque Flash est en cours d'exécution et qu'aucun document n'y est ouvert, l'écran de bienvenue s'affiche. Il contient les quatre zones suivantes : o Ouvrir un élément récent permet d'ouvrir vos documents les plus récents (cliquez sur l'icône Ouvrir). o Nouveau répertorie les types de fichier Flash, tels que des documents Flash et des fichiers codés en ActionScript. o Créer à partir de modèle répertorie les modèles utilisés le plus fréquemment pour créer des documents Flash. o Extension : relie au site Web Flash Exchange, à partir duquel on peut télécharger des applications d'aide, des extensions ainsi que d'autres informations pertinentes. L'écran de bienvenue offre également un accès rapide aux ressources de l'Aide. vous pouvez suivre une visite guidée de Flash, découvrir les ressources de la documentation et trouver des services de formation Adobe agréés. o Sélectionnez Ne plus afficher pour masquer l'écran de bienvenue. o Pour afficher l'écran de bienvenue, sélectionnez Edition > Préférences (Windows®) ou bien Flash > Préférences (Macintosh®), puis sélectionnez Afficher l'écran de bienvenue dans le menu Au démarrage de la catégorie Général. 3.1 Utilisation de Macromedia Flash 3.1.1 Utilisation de la scène La scène est une zone rectangulaire dans lequel on place le contenu graphique lors de la création de documents Flash. La scène de l'environnement auteur représente l'espace rectangulaire dans Flash Player ou dans une fenêtre de navigateur Web dans lequel votre document est affiché pendant la lecture. On peut effectuer un zoom avant/arrière pour modifier l'affichage de la scène. On peut utiliser la grille, les repères et les règles pour vous aider à placer des éléments sur la scène.
95 Figure N° 11 : Interface de la scène de Macromedia flash 3.1.2 Utilisation du scenario Le scénario organise et contrôle le contenu d'un document au fil du temps dans des calques et des images. Tout comme les films, les documents Flash divisent les périodes de temps en images. Les calques sont semblables à des bandes de film empilées les unes sur les autres, chacune contenant une image différente qui apparaît sur la scène. Les principaux composants du scénario sont les calques, les images et la tête de lecture. Les calques d'un document sont répertoriés dans une colonne affichée sur la gauche du scénario. Les images contenues dans chaque calque sont affichées sur une ligne à droite du nom du calque. L'en-tête du scénario, situé en haut du scénario, affiche le numéro des images. La tête de lecture indique l'image actuellement affichée sur la scène. Pendant la lecture d'un document, la tête de lecture défile de gauche à droite dans le scénario.
La barre d'état du scénario, affichée en bas de ce dernier, indique le numéro de l'image sélectionnée, la cadence d'image actuelle et le temps écoulé jusqu'à l'image actuelle. 3.1.3 Utilisation des composants Dans Flash, un composant est un module préparé et réutilisable qui ajoute une capacité particulière à un document Flash. Les composants peuvent inclure des graphiques, ainsi que du code. Ils contiennent donc des fonctionnalités préconstruites que vous pouvez aisément ajouter à vos projets Flash. Il peut s'agir par exemple d'un bouton radio, d'une boîte de dialogue, d'une barre de chargement ou même d'un élément sans aucun graphique, tel qu'un minuteur, un utilitaire de connexion au serveur ou un analyseur XML personnalisé. Si vous avez peu d'expérience en écriture de code ActionScript, vous pouvez ajouter des composants à un document, définir leurs paramètres dans l'Inspecteur des propriétés ou dans l'Inspecteur des composants, puis gérer leurs événements dans le panneau Comportements. Par exemple, sans écrire aucun code ActionScript, vous pouvez affecter un comportement Atteindre la page Web à un composant Button pour qu'une adresse URL s'ouvre dans un navigateur Web lorsque l'utilisateur clique sur ce bouton. Si vous êtes programmeur et que vous souhaitez créer des applications plus robustes, vous pouvez créer les composants dynamiquement, utiliser ActionScript pour définir les propriétés et appeler les méthodes à l'exécution. Vous pouvez également exploiter le modèle d'écouteur d'événement pour gérer les événements.
97 3.2 Gestion des documents Dans Flash, vous pouvez créer un document ou ouvrir un document enregistré précédemment et vous pouvez également ouvrir une nouvelle fenêtre pendant que vous travaillez. Vous pouvez définir des propriétés pour des documents nouveaux ou existants. 3.2.1 Création d'un nouveau document o Choisissez Fichier > Nouveau. o Dans l'onglet Général, choisissez Document Flash. Sous Windows, vous pouvez créer un document du même type que le dernier créé en cliquant sur le bouton Nouveau fichier de la barre d'outils principale. 3.2.2 Création d'un nouveau
document o Cliquez sur l'onglet Modèles. o Sélectionnez l'une des catégories de la liste des catégories, sélectionnez un document dans la liste des éléments de catégorie et ensuite cliquez sur OK. Vous pouvez choisir parmi les modèles standard fournis avec Flash ou ouvrir un modèle que vous avez enregistré précédemment. 3.2.3 Ouverture d'un document existant o Choisissez Fichier > Ouvrir. o Dans la boite de dialogue Ouvrir, sélectionnez le fichier ou saisissez son chemin d'accès dans le champ Atteindre. o Cliquez sur Ouvrir.
3.2.4 Définition des propriétés d'un document o Ouvrez votre document et sélectionnez Modifier > Document. o La boîte de dialogue Propriétés du document apparaît. o Pour Cadence, indiquez le nombre d'images à afficher par seconde. o Pour la plupart des animations affichées sur ordinateur, en particulier celles qui sont lues à partir d'un site Web, une cadence de 8 à 15 images par seconde est suffisante. Lorsque vous changez la cadence d'images, la nouvelle cadence devient la configuration par défaut pour les nouveaux documents. o Pour Dimensions, définissez la taille de la scène : o Pour définir la couleur d'arrière-plan de votre document, cliquez sur le triangle de la puce de couleur d'arrière-plan, puis sélectionnez l'une des couleurs de la palette. o Pour spécifier l'unité de mesure des règles que vous pouvez afficher le long des bords supérieurs et latéraux de la fenêtre de l'application, sélectionnez une option dans le menu Unités de la règle situé en bas et à gauche. (Ce paramètre fixe également les unités utilisées dans le panneau Info). o Effectuez l'une des opérations suivantes : 3.2.5 Modification des propriétés d'un document o Désélectionnez tous les éléments, puis sélectionnez l'outil Sélection. o Dans l'Inspecteur des propriétés (Fenêtre > Propriétés), cliquez sur le bouton Modifier accolé à la propriété Taille pour afficher la boîte de dialogue Propriétés du document. o Pour sélectionner une couleur d'arrière-plan, cliquez sur le triangle de la puce de couleur d'arrière-plan et choisissez une couleur dans la palette. o Pour Cadence, indiquez le nombre d'images qui doivent être affichées par seconde. o Pour les paramètres de publication, cliquez sur le bouton Modifier accolé à la propriété Profil. Flash affiche la boîte de dialogue Paramètres de publication, avec l'onglet Flash sélectionné. Choisissez les options appropriées dans la boîte de dialogue. Pour plus d'informations,
99 3.3 Publication des documents flash 3.3.1 Documents HTML Un document HTML est nécessaire pour lire un fichier SWF dans un navigateur Web et pour spécifier les paramètres du navigateur. Pour afficher un fichier SWF dans un navigateur Web, un document HTML doit utiliser les balises embed et object avec les paramètres appropriés. Remarque : Vous pouvez créer un document HTML avec les balises object et embed correctes à l'aide de la boîte de dialogue Paramètres de publication, en sélectionnant l'option HTML. Pour plus d'informations, consultez la section Flash peut créer le document HTML automatiquement lorsque vous publiez un fichier SWF. 3.3.2 paramètres de publication La lecture d'une animation Flash dans un navigateur Web requiert un document HTML activant le fichier SWF et spécifiant les paramètres du navigateur. Ce document est généré automatiquement par la commande Publier, avec les paramètres HTML d'un document modèle. Le document modèle peut être tout fichier texte contenant les variables de modèles appropriées (y compris un fichier HTML standard), un fichier incluant le code nécessaire pour les interprètes spéciaux, tels que ColdFusion® ou Active Server Pages (ASP), ou un modèle inclus dans Flash. Vous pouvez saisir manuellement vos paramètres HTML pour Flash ou personnaliser un modèle intégré dans n'importe quel éditeur HTML. Les paramètres HTML déterminent l'emplacement dans lequel le contenu Flash apparaîtra dans la fenêtre, la couleur d'arrière-plan, la taille du fichier SWF et ainsi de suite, et définissent les attributs des balises object et embed. Vous pouvez changer ces paramètres, ainsi que d'autres, dans le panneau HTML de la boîte de dialogue Paramètres de publication. La modification de ces paramètres neutralise les options définies dans votre fichier SWF.
100 4. Sephir's server 2.0 La dernière version de Sephir's Server est dotée de nombreuses modifications qui ont été incluses. On retrouve les fonctionnalités suivantes : o Apache 1.3.24 ; o MySql 3.23.39 ; o Php 4.2.0 ; o PhpMyAdmin 2.2.0 ; o Le verrouillage de répertoires grace aux fichiers .htaccess et .htpasswd (non disponible dans les versions précédentes) ; o Optimisation du fichier httpd.conf pour l'utilisation de scripts CGI/PERL ; o Ooption permettant de démarrer le serveur au lancement de l'application ; o Il n'est plus nécessaire de désactiver le serveur pour quitter l'application . 4.1 Utilisation Sephir's server 2.0 4.1.1 Activation du logiciel Au moment du lancement du logiciel avec le double clic sur son icône, il lance quelques services mais les fonctions du serveur restent désactivées. Au lancement de l'application, une icône apparaît dans la barre de tâche près de l'horloge. Cliquez sur cette icône pour faire apparaitre le menu. En haut du menu, cliquez sur "Activer", le serveur se met en marche et l'icône clignote. 4.1.2 Démarrage automatique Dans le menu de l'icône de Sephir's Server, cliquez sur "Options" pour ouvrir la boite de dialogue des options. Cochez ensuite la case "Activer le serveur au démarrage de l'application". Au prochain démarrage de Sephir's Server, le serveur sera automatiquement activé. Pour désactiver temporairement le serveur, cliquez sur "Désactiver" en haut du menu de l'icône, le serveur sera désactivé mais l'application ne sera pas fermée
4.2 Gestion des sites I.III 21SANW4211117421111ssier racineLors de l'installation, le programme crée un dossier "Home" dans la racine du disque où est installé le logiciel. Ce dossier contient un fichier index.php, ne le supprimez pas, c'est ce fichier qui est visé lorsque vous tapez http://localhost/ dans votre navigateur internet. Ce dossier contient aussi un répertoire Test, vous pouvez y placer les fichiers de votre premier site, le renommer ou même le supprimer. Ce dossier contient également des fichiers exemple ".htaccess" et ".htpasswd". Le dossier "Home" est destiné à recevoir les répertoires contenants les fichiers de vos sites. Chaque sites est un répertoire différent dans "Home". 4.2.2 Accès direct au sites Dans le menu de l'icône de Sephir's Server, vous trouverez un sous-menu contenant les dossiers de vos sites se trouvant dans le dossier "Home". Cliquez sur celui de votre choix pour ouvrir directement Internet Explorer sur le dossier choisi. Lorsque le serveur n'est pas actif, les sites ne sont pas accessibles dans le sous-menu des sites. Il en est de même pour la page d'accueil de Sephir's Server et l'accès aux bases de données. L'option "Actualiser" vous permet d'actualiser la liste des dossiers en cas de rajout de répertoires dans "Home" pendant le fonctionnement de l'application.
102 4.2.3 Accès direct aux fichiers Dans le menu de l'icône de Sephir's Server, vous trouverez un sous-menu contenant les dossiers de vos sites se trouvant dans le dossier "Home". Cliquez sur celui de votre choix pour ouvrir directement l'explorateur de fichiers sur le dossier choisi. L'option "Actualiser" vous permet d'actualiser la liste des dossiers en cas de rajout de répertoires dans "Home" pendant le fonctionnement de l'application. 4.3 Gestion des bases données 4.3.1 Création des BDD Les bases de données sont stockées dans " c:\program files\sephirserver\mysql\data\". Un répertoire nommé Test est déjà présent, vous pouvez utiliser, renommer ou même supprimer ce répertoire. Un autre répertoire nommé mysql est aussi présent, il ne doit surtout pas être supprimé ni même renommé. Cette base de données contiendra les informations sur les autres bases que vous aller créer, privilèges utilisateur ... Chaque fois que vous créez une base de données dans PhpMyAdmin, un dossier portant le nom de la base est créé dans "Data". 4.3.2 Privilèges des BDD La configuration de base des utilisateurs et mots de passe pour les bases de données sont : o Nom d'utilisateur : "root" o Mot de passe : aucun mot de passe Il est possible d'attribuer un ou plusieurs noms d'utilisateurs et mot de passe sur une base de donnée et ce à partir de PhpMyAdmin. Exemple : Ouvrez la page PhpMyAdmin en cliquant sur l'icône de Sephir's Server et en sélectionnant "Bases MySql" dans le menu.
Dans la page d'accueil de PhpMyAdmin créez une base et nommez la "base1". Vous souhaitez que cette base ne soit accessible qu'aux utilisateurs suivant : "user1" mot de passe "pass1" Pour que les modifications soient bien prises en compte, cliquez sur "Recharger MySQL" une fois l'attribution des privilèges terminé. Vous pouvez par la suite modifier le mot de passe ou les privilèges d'un utilisateur en modifiant l'enregistrement de l'utilisateur concerné. Il est aussi possible d'autoriser un utilisateur à pouvoir avoir accès à une seconde base de données en cliquant sur "Autres privilèges" sur l'enregistrement de l'utilisateur.
104 |
|
