GAGNÉ JOCELYN
GAGJ131278-08

BACCALAURÉAT EN INGÉNIERIE

TRAVAIL FINAL, CONCEPTION D’UN SITE WEB
JOKES EN VRAC

TRAVAIL PRÉSENTÉ À
M. TREMBLAY CARL
DANS LE CADRE DU COURS :
8GIF108 – CONCEPTION DE SITE WEB

VENDREDI 23 AVRIL 2004
MODULE D’INFORMATIQUE ET MATHÉMATIQUE
UNIVERSITÉ DU QUÉBEC À CHICOUTIMI

Planification su site :

Introduction

Avant même d’écrire la première ligne de code, il demeure toujours primordial de bien se préparer et de savoir ce dans quoi on s’embarque, donc faire la planification du site.  Mieux sera le plan, plus rapide et efficace sera la création du site web.  Par conséquent, dans se travail est décris diverses information concernant le futur site Jokes en Vrac.

D’abord, la première raison à se poser à la création d’un site est : pourquoi?  En fait, celle-ci est fort simple.  Tout le monde connaît la longue tradition des blagues ici au Québec, avec le célèbre préambule : c’était une fois un gars…  Le but est donc de fournir au québécois, particulièrement les étudiants universitaires une façon simple de partager des blagues, question de rire un peu entre deux travails de cession.

Ce présent document résumera les diverses étapes encourues afin d’exécuter le site web.  A priori, il fut important de bien cerner le problème et d’évaluer le besoin du client.

Évaluation des besoins

D’abord, avant même de se questionner sur l’apparence du site, passons à une évaluation des besoins du client ainsi que des caractéristiques du public cible.  Tout cette information est mise sur pied avec le client durant la première rencontre.  Les détails de la création du site suivent la planification.

Buts du client :
Le but, comme déjà mentionné est d’offrir un site afin que les étudiants peuvent s’échanger facilement de nouvelles blagues ou de pouvoir simplement lire ce que les autres ont écrient.  La création du site s’échelonner sur un mois pour être suivie de la même période de temps pour les essais.  Le site doit être attrayant tout en étant rapide et facile à naviguer.  L’évaluation de la réussite du site se fera par le nombre de blague soumis par les internautes ainsi par le nombre de visiteur. 

L’audience :  
Afin d’offrir le meilleur service, il est nécessaire d’établir les caractéristique et besoin de l’usager générale.  La plupart des gens n’on qu’une connaissance limiter en informatique, donc le site devra offrir une navigation simple mais efficace.  Le site étant ouvert à tous, il devra aussi être rapide afin de permettre à tout genre de connexion d’accéder et de naviguer facilement à travers le site.  En ce qui trait du contenue, il devra contenir des blagues en tout genre afin de satisfaire tous les goûts.  Le nombre de visite par semaine sera variable d’un utilisateur à l’autre, néanmoins, il devra présenter une certaine vie pour encourager la visite quotidienne.  Donc un site attrayant, mais léger, c’est-à-dire de l’ordre de 100k.

Critique :
Certain membre type vont offrir leur critique durant la construction du site afin que ce dernier remplisse bien son travail.

Contenue
Malgré que les usagers pourront soumettre leurs blagues, il est bien évident qu’il sera nécessaire d’établir une base de donnée de départ afin que le site soit dès le départ intéressant.  Donc, un nombre important de blagues devront être répertorier, classer pour ensuite être incluse dans le site dès le départ.

Spécification du site Internet
Cette section concerner les buts et stratégies du site web.

Mission du site :
D’abord, la mission, comme déjà mentionné, est de fournir aux étudiants ou tout autres personnes une façon simple et facile de partager des blagues.  L’organisme n’a pas de but lucratif, le service étant entièrement gratuit.  
Pourquoi un site :
Alors, pourquoi un site Web quand il suffit de se les raconter simplement.  D’abord, souvent les gens oublie les gags qu’on leur raconte, ou oublie des détails important,  donc avec un site Web, il est possible de la mettre immédiatement par écris pour la partager à un large groupe.  Ensuite, avec les occupations de tous et chacun, il est parfois difficile de se rencontrer afin de partager des blagues.  Donc, grâce à ce site, chacun peu amener facilement sa part pour le bénéfice de tous.
Les objectifs
Les objectifs important à retenir durant la conception est que le site devra être attrayant,  mais surtout facilement accessible par n’importe laquelle des connections et être aisément navigable, en plus d’offrir un service simple pour soumettre un gag.  Un autre objectif serait d’établir des liens avec les autres sites du même genre pour créer une sorte de webring de blague québécoise.
Audience :
L’audience primaire sont les étudiants universitaires de l’UQAC, mais le site est ouvert à toute amoureux de blagues, c’est pourquoi que le site sera inscrit dans divers moteurs de recherche en plus d’établir des liens entre d’autres sites de blagues.
Ce que doit penser le visiteur après une visite :
Naturellement, le client doit rire après avoir visiter le site et doit avoir hâte que de nouvelle blague se rajoute à la base de donnée.
Succès
Pour faire du site un succès, il faudra faire passer la nouvelle de son existence, par les moteurs de recherche et par la distribution de l’url à travers le réseau universitaire.  Pour mesurer son succès après la mise en marche,  il y aura un compteur du nombre de visiteur mais aussi en comptant le nombre blagues qui serons fournie par les usagés.  Le maintient du site devra être constant, car chaque blague devra être classer dans la base de donnée après avoir passez une semaine dans la section nouveauté.  Donc, le travail devra être donnée à quelqu’un de fiable qui travaillera sur le site tout les jours.

Information de production technique :
Maintenant, afin d’atteindre ces objectifs mentionnés plus haut, il faut se demander se en quoi nous allons avoir besoin.  D’abord, le site devra avoir environ 20 pages dès le début.  Ce dernier doit posséder suffisamment de blague dès le départ pour être divertissant et surtout encourager l’usager à fournir ses propres blagues personnelles.  Les fonctions spéciale requise serons bien entendue un livre des invités pour que l’usager puisse soumettre ses blagues, un compteur pour vérifier le nombre de visite mais aussi de fonction DHTML afin de rendre la navigation plus efficace et rapide, le site possédant de nombreuses sous-sections.  Le budget alloué est de 0$, et le travail est entièrement alloué à une seule personne.  Pour la cédule de construction du site et sa mise en fonction, elle devra s’échelonner sur un mois, finissant le 23 avril 2004.  La première semaine sera dédiée à la planification et à la préparation.  Ensuite, durant la deuxième semaine, cette dernière sera consacrer à l’élaboration de la base de donnée de blague, c’est-à-dire accumuler des blagues et les classé en section spécifique.  En ce qui trait de l’interface, ce dernier sera mis sur pied la troisième semaine.  Finalement, pour la dernière semaine, le site sera mis en fonction sur Internet en plus de régler tout problème qu’il pourrait apparaître afin que se dernier soit prêt pour le 23 avril.  Pour l’architecture du site, cette dernière sera décris dans la section suivante.

Check-list :

Production : 
En ce qui trait de la production, c’est fort simple, une seule et même personne doit assumer toutes les responsabilités en plus de devenir webmestre à la suite de la création du site.

Technologie

Navigateur :
Pour des raisons d’ordre de temps, le site ne sera disponible que pour les navigateurs les plus récents, c'est-à-dire tout navigateur étant compatiblee au CSS.  Il est fort possible que même avec la dernière version de Netscape, certaines fonctionnalités soit inaccessible.  Un effort sera tout de même fait pour que la plupart des navigateurs récents puissent fonctionner.  Le public cible étant les étudiants, ces derniers ayant tous accès à des ordinateurs performants de l’université, l’aspect de compatibilité se voit ainsi réduit.  Un effort pourra être fait plus tard pour créer un site miroir accessible pour tous.

Network :
Le site sera disponible sur Internet et accessible par tout genre de connections.  Cependant le budget étant de 0$, ce dernier ne bénéficiera pas d’une bande passante élever, donc peu de visiteur en même temps.
DHTML et fonction avancer :
Le site va posséder un menu dynamique DHTML pour rendre la navigation rapide.  Une méthode de navigation directe sera aussi créer pour ceux qui ne possède pas cette fonctionnalité.  Le site va aussi contenir du java script pour le menu dynamique, la date de modification et le déroulement au hasard de bandes quelconque.  Finalement, le livre des invités sera en php, mais ce dernier sera fourni par un site externe.

Support :
L’usager pourra entrer en contacte avec le webmestre par le livre des invités ou par une adresse de courriel.
Base de donnée :
Ouverte à tous sans aucun besoin de code d’accès ou d’inscription préalable.

Audiovisuel :
La base de donnée va contenir des fichiers audiovisuels mais ceux-ci seront téléchargeable, le site n’offrant aucun support technologique pour les visionner.
Support du serveur :
Très peu de service est offert par le serveur externe.  Le site n’aura pas un nom de domaine et aura seulement 15meg de mémoire pour sa base de donnée, donc un nombre limiter de photo de type jpeg.  La possibilité demeure d’ouvrir un autre site Web gratuit qui servirait exclusivement de réserve d’information.  Le serveur offre un service d’aide technique 7 jours sur 7 et 24 heures.  Finalement, il offre un service de statistique sur le nombre de visiteurs en plus des périodes ou le site a été visité.  Finalement, il ne supporte pas les CGI.

Budget
Celui-ci étant de zéro, les programmes utilisé serons tous gratuit ou déjà en possession de l’unique responsable du site.

Éditeur :
Le webmestre et l’éditeur sont une seule et même personne, soit celui qui va créer le site.  Toutes les responsabilités après la création du site lui reviennent.

Étape encourue lors de la création du site :

Rencontre 1, 23 mars :
Durant la première rencontre, le client et moi ses ont contenter de faire un résumer de ce que ce dernier désir et de besoin pour atteindre cette objectif.  Voici ce qu’il a décris : un site jolie, mais rapide à ouvrir.  Il est important que la navigation soit rapide et efficace, étant une réserve de blague, l’utilisateur doit atteindre rapidement sont but sinon on risque de le perdre.  Néanmoins, la navigation doit être facile pour tout genre de niveau d’expérience.  Je lui ai proposé une forme simple avec des onglets dans le haut de la page, idée qu’il trouve bonne, mais il désirerait avoir un exemple.  Ensuite, il a été question de la base de donnée.  Ce dernier ma donnée un cd-rom contenant toute les blagues qu’ils veux dans le site de base.  Le cd-rom contient plusieurs genres et type de blague qui devra être classé.  J’ai donnée rendez-vous au client pour le vendredi de la même semaine afin que je lui montre un exemple.

23 mars au 25 mars
Afin d’avoir quelque chose à montrer au client, j’ai créer un prototype simple en plus d’élaborer au plan avec lequel j’allait discuter avec le client à la prochaine rencontre.

26 mars, deuxième rencontre
Après avoir montrer l’ébauche au client, celui-ci c’est montrer satisfait pour l’apparence générale de la page, mais n’aimait pas les couleurs.  Celui-ci proposa diverses teintes de jaune au lieu du rouge que j’avais utilisé.  Il aima bien la forme de chemise en papier et trouvait que des couleurs ressemblant à la réalité serait plus approprié.  Nous passâmes ensuite au planning.  Le texte de ce dernier est écrit au début de ce texte.  Je lui donnais rendez-vous pour le mercredi le 31 mars

27-30 mars
Durant cette période, j’ai terminer le planning en plus de commencer à séparer les blagues en section et en créant des "gif" qui serviraient de thumbnails pour la section photo.  Je commençai la recherche aussi afin de trouver les diverses technologies dont j’aurais besoin.  J’ai facilement obtenus un petit programme de DHTML par le biais du site Internet de Carl Tremblay.  J’ai aussi mis la main sur un autre programme du même genre dans le livre la Bible du HTML.  À partir de ses données, il me sera facile de mettre sur pied une fonction adapter au site.  J’en ai aussi profité pour ajouter au prototype le DHTML de M. Tremblay afin de pouvoir le montrer au client.

31 mars, troisième rencontre
Cette rencontre fut dédiée à l’architecture du site.  À partir du prototype, je lui explique que site de forme hiérarchique serait le plus adapter pour son site.  Ensuite, il fut question d’apparence en générale : les couleurs, les dessins qu’il a besoin, le fonctionnement et l’apparence des onglets, comment serait diviser les divers pages web.  Voici ce qui en résulte.  D’abord, la page mère sera celle des nouveautés, où l’on pourra lire les nouvelle blagues qui on été proposé.  Ensuite, il y aura l’onglet écrite, photo, téléchargement et finalement soumettre.  Il n’y aura pas de division dans le site, celui-ci se téléchargeant chaque fois qu’on appuis sur un onglet.  De plus, il devra avoir un mouvement des onglets, c’est-à-dire que celui que l’on regarde devra être avancé par rapport au autre, pour donnée l’impression que l’on les déplace pour allez lire le contenu.  Le client est satisfait du DHTML, et le système devra faire partie de la navigation dans les onglets pour directement accéder à la sous section, par exemple sous l’onglet écrite, les blagues politiques, d’animaux, religieuses etc.  Afin de permettre la navigation pour ceux qui ne possède pas cette fonction, des liens directe sera inclus dans le bas de la page.  En ce qui trait des dessins, il devra avoir un arrière plan en lien avec le site, des sourires par exemple.  Aussi, le client désire que le titre Jokes En Vrac soient un dessin.  Aussi, le client désir avoir une java script donnant la date de la dernière modification pour que les utilisateurs sachent que le site contient quelque chose de nouveau.  Un rendez-vous dans une semaine fut cédulé.

En résumé, voilà ce qui ressortie du design.  Le site va ressembler à une chemise de classeur avec les couleurs normale de ces chemises, soit différent ton de jaune.  Des onglets dans le haut de ces chemises vont permettre de naviguer à travers le site.  Dans ces onglets sera intégrer un menu dynamique à travers les divers sections de blague.  À la suite de recherche, un site Web offrant un service de guestbook modifiable fut trouver, ce qui élimine le problème relier à PHP.  

1 avril au 6 avril
Durant cette période, les diverses pages selon les section furent misent sur pied.  Aussi, le DHTML à été modifier avec succès, faisant partie intégrante du site.  Le meilleur des deux exemples fut pris tout en apportant diverses modification nécessaire : la couleur, le contenue, la position, etc.  Pour le guestbook, le client est maintenant inscrit, mais je vais garder pour la fin son adaptation, quand les pages seront misent sur Internet afin que l’appelle d’image soit possible.

À la suite de la création de chacune des pages, le texte fut écris et inclus dans la page en plus d’inscrire les liens vers les blagues.  Si il serait mis en ligne, le site serait fonctionnel.  Le logo n’est toujours pas créer, mais l’arrière fond été ajouter : une mosaïque de sourire.  Une fonctionnalité intéressant serait de rajouter un script qui ferait changer l’arrière fond au hasard.  Plusieurs sourires différend peuvent être facilement trouvé, il suffirait de trouver un exemple de java script.  Si d’autre pages devait se rajouter, il suffirait de se servir des calques déjà créer pour facilement la fabriquer.

7 avril, quatrième rencontre
De cette rencontre, très peu à ressortir.  J’ai montrer ce que j’avais de fait en plus de lui donnée l’échéancier.  Il s’est montré satisfait.  Pour la publicité il a été décidé de faire des échanges de bannières entre différent site du même genre.  Prochain rendez-vous dans une semaine.

8 au 13 avril
Cette semaine est dédiée à la construction du site.  Ce dernier étant déjà avancé, il fut facile de tout mettre ensemble pour que cela fonctionne.  Donc, les liens des blagues sont créés sur leur page respective, le background immobile est placé, le DHTML est fonctionnel, la date de modification est aussi en fonction.  J’ai aussi terminé le logo de la page durant la semaine.  Maintenant, il suffit de tester tout cela hors connections.  À part quelque problème mineur, tout fonctionne à merveille.  J’ai pris soin de mettre le code bien dégager et claire afin que ce dernier puissent facilement être maintenue, car ce site va demander une constante maintenance.  Aussi, pour des modifications faciles, les CSS sont sur un fichier à part, de même pour la java script.

14 avril, dernière rencontre
J’ai fait essayé le site au client et se dernier s’est montrer amplement satisfait.  Je lui ai alors fait part de la publicité.  Ce dernier ma demander à ce que le url du site soit distribuer au étudiant de l’UQAC en plus de mettre le site sur les moteurs de recherche.  Si possible, il désirerait des affiliation avec d’autre site du même genre pour une meilleur visibilité.  Afin d’évaluer la popularité du site, je vais me servir du compteur fournie par le serveur pour vérifier le nombre de visite en plus de compter l’évolution du nombre de blague soumise.

15 au 23 avril
Le site a été mis en ligne durant cette semaine.  Le guestbook à été modifier facilement pour qu’il se fonde dans le décor déjà présent.  Toute les fonctions sont terminer, même le arrière plan java script est compléter.  J’ai distribué le url à plusieurs banques de données de courriel d’étudiant en plus d’avoir soumis le site au moteur de recherche.  J’ai même fait quelque demande à d’autre site du même genre afin de se créer des liens mutuel.  Il va falloir attendre pour les résultats.

Explication des Javas Scripts utilisés dans le site Web :

Menu dynamique :

C’est ce script qui crée le menu déroulant pour la section photo et écrite.  Son fonctionnement est simple, il appelle un menu crée dans les CSS.  C’est là qu’on définie ses propriétés avec ses couleurs.  La seule fonction du script est de l’appeler ou fermer le menu selon la position du curseur de la souris.  Ce dernier est une gracieuseté de Carl Tremblay ainsi que du livre la Bible de HTML.  J’ai fait une sorte d’amalgame des deux scripts fournis par les sources mentionnées, prenant le meilleur de chacun, pour ensuite modifier le résultat afin de l’harmoniser avec mon site.

Bloqueur d’erreur Java script :

Étant donnée que l’hébergeur du site Web est gratuit, il arrive souvent qu’il ait une erreur due aux bannières.  La fonction du script est d’empêcher l’avertissement d’erreur d’apparaître.  Il s’agit que de deux lignes, avec la mention block error dans la «Head» du document HTML.

Date de modification :

Au lieu du traditionnel dernière modification, ce script crée un joli tableau donnant la date de création, la dernière modification et envoi même un cookie afin de vérifier si l’utilisateur est venue visiter le site depuis sa dernière modification.  Pour le fonctionnement, il est divisé en plusieurs section, soit la création du cookie, l’envoie et la suppression de ce dernier.  Ensuite, les fonctions sont appelées et le tableau fournissant les données est créé.

Bannière :

Ce dernier fait changer une bannière selon un temps prédéterminé.  Il se divise en deux parties, une allant dans la «Head», et l’autre dans le «Body».  Pour la section dans la «Head», le script va chercher les bannières et établi le temps qu’elles vont rester affichées avant de changer pour la prochaine.  Pour la partie dans le «Body», elle fait seulement appeler la fonction écrit plus haut, ainsi il est possible de placer le résultat à l’endroit désiré.

Livre des invités :

Étant donnée les problèmes reliés aux hébergeurs gratuits, le fournisseur du livre des invités n’est pas le même que pour celui du site Web.  Ce fournisseur externe propose un livre gratuit dont l’apparence est entièrement modifiable, ce qui m’a permis de lui donner la même apparence que mon site Web.  Il suffit de mettre un lien dans mon site pour le relier au livre.  La modification de l’apparence se fait par HTML.

Publicités

Il y a deux façon, généralement, de faire de la publicité pour un site Web : payé ou recevoir un service gratuit.  D’abord, passons à la façon traditionnelle, c'est-à-dire s’écrire au moteur de recherche.  Plusieurs compagnies offrent des forfaits concernant cette option, tous semblables.  Ici, il sera question de Yahoo!, l’hébergeur de mon site.  Il est nécessaire cependant d’user de tag méta pour les moteurs de recherche.

Il est très facile d’être inscrit à tous les moteurs les plus populaires, mais il faut être prêt à payer.  Yahoo! offre présentement un spéciale d’inscription au moteur pour 90 jours gratuit, une valeur de 47$.  Après ce délai, indubitablement, on commence à payer.  Passons en revue les services offerts.  D’abord, bien évidemment, la souscription aux moteurs de recherche à tout les mois.  L’accès illimité à 7outils d’analyse du site, dont sur le nombre de visite.  L’accès à deux outils «submitnet», C’est-à-dire un outil d’aide aux mots clés et un pour les moteurs de recherche.  Finalement, un service à la clientèle 24 heures.

Tout les moteurs de recherches vont avoir leurs forfaits, tous payant habituellement.  Cependant, en ce qui trait des listes de sites à accès rapide que les moteurs offrent, divisés en catégories, ceux-ci sont gratuits.  J’ai déjà inscrit le site à Yahoo!, Google et à la toile du Québec.  Inévitablement, le service étant gratuit, les moteurs reçoivent des milliers de demande, c’est pourquoi les délais de réponse sont de 12 semaines.

Finalement, la publicité qui va sûrement le plus me rapporter, c’est en donnant l’url à le plus de personnes possibles, qui vont eux même en faire autant, ce qui devrait accroître considérablement la popularité du site si les utilisateurs se voient satisfaits.  

Une autre possibilité serait de donné l’url dans des journaux étudiants, faire des dépliants, cartes d’affaires…  Néanmoins, la seule qui sans doute serait gratuite est les journaux étudiant.  Malheureusement, c’est la fin de la cession, alors il va falloir attendre.

 Reste à savoir si cela va porter fruit, et si la limite de bande passante ne deviendra pas trop rapidement un problème sérieux.  La seule possibilité gratuite pour ce problème est de créer des sites miroirs.