Petitsjobs.ch : Création et mise en place d'un site internet d'aide à la recherche de petits jobs

Dossier publique rendu pour le travail de maturité 2010-2011

Jonathan Zimmermann

- Gymnase de Burier

Consulter la version originale (PDF)

 

Remerciements

Avant commencer ce dossier, je souhaiterais remercier toutes les personnes qui m’ont aidé durant ce long projet.

Remerciements donc à :

-        Monsieur Antoine Fragnière, Maitre responsable qui m’a suivi tout au long de ce travail de Maturité.

-        Les directeurs des gymnases, écoles secondaires et primaires ayant accepté de promouvoir ce projet.

-        Monsieur Thierry Maire tout particulièrement, directeur du Gymnase Intercantonal de la Broye, qui m’a apporté un très grand soutien dans la promotion de petitsjobs.ch ainsi que pour son développement futur.

-        Les communes romandes ayant soutenu la promotion du site.

-        Toutes les personnes m’ayant conseillé sur le fonctionnement du site et en ayant rapporté les bugs et problèmes.

-        Toutes les étudiants qui ont posté une annonce sur le site et ont ainsi grandement contribué à son développement.

-        Toutes les personnes qui ont parlé de petitsjobs.ch autour d’eux tant par voie orale, e-mail voire grâce à Facebook.

-        Bien sûr, mes parents qui m’ont toujours soutenu, conseillé et aidé dans de nombreuses démarches.

-        Et évidemment, toutes les personnes que j’aurais oubliées !


Table des Matières

 

Introduction. 5

1       Préparation du projet 6

1.1        Choix du sujet 6

1.2        Concurrence. 7

1.3        Choix du nom.. 8

2       Fonctionnement du site. 9

2.1        Inscription. 9

2.2        Identifiant de connexion. 9

2.3        Accessibilité des annonces. 10

2.4        Contenu des annonces. 10

2.5        Catégories des annonces. 11

2.6        Durée de Publication. 11

2.7        Gestion des annonces. 12

2.8        Recherche d’annonces. 12

2.9        Aide / F.A.Q. du site. 14

2.10      Réseaux Sociaux. 15

3       Ergonomie d’utilisation. 15

3.1        Instructions explicites. 16

3.2        Ordre implicite des étapes. 16

3.3        Suppression des éléments peu utiles. 18

3.4        Pages importantes accessibles de partout 18

4       Programmation. 19

4.1        Choix des langages utilisés. 19

4.2        Compétences initiales. 21

4.3        Structuration du site. 22

4.3.1         Organisation des fichiers. 23

4.3.2         Programmation modulaire. 23

4.3.3         Indentation. 24

4.3.4         Commentaires. 24

4.3.5         Structure de la base de données. 24

4.3.6         Gestion des relations. 25

4.4        Difficultés rencontrées. 26

4.4.1         Hébergement du site. 26

4.4.2         Planification des tâches. 27

4.4.3         Librairies JavaScript 27

4.4.4         Ajax. 28

4.4.5         Ajout des localités dans la BDD. 29

4.4.6         API Facebook, Twitter et Google Map. 29

4.4.7         Compatibilité Internet Explorer 30

5       Création du design. 30

5.1        Couleurs principales. 31

5.2        Design Extensible. 31

5.3        Organisation des menus. 31

5.4        CSS 3. 32

5.5        Ressources graphiques. 32

6       Mise en service du site. 33

6.1        Technique. 33

6.2        Promotion. 33

6.2.1         Facebook. 33

6.2.2         Mailing. 33

6.2.3         Circulaire au Gymnase de Burier 34

6.2.4         Contact des directeurs de gymnases. 34

6.2.5         Contact des directeurs d’écoles primaires et secondaires. 35

6.2.6         Contacts des médias. 36

6.2.7         Contact des communes. 37

6.2.8         Google AdWords. 38

6.2.9         Divers. 38

6.3        Statistiques. 39

7       Protection des mineurs. 40

Conclusion. 42

Sources. 43

Scripts Open-Source. 43

Icônes libres de droits. 43

Table des illustrations. 43

Annexes. 2

Circulaire adressée au étudiants. 3

Circulaire adressée aux employeurs. 4

 


 

Introduction

Pour commencer, merci à vous, lecteurs, de me lire maintenant.

Dans ce dossier d’une quarantaine de pages environ je vais traiter tous les points importants que j’ai eus à soulever lors de la réalisation de mon travail de maturité « Création et mise en place d’un site internet d’aide à la recherche de petits jobs ».

Pour ce travail, j’ai bien sûr également dû réaliser un site internet auquel vous pouvez désormais accéder à l’adresse http://www.petitsjobs.ch.

Par souci de sécurité, les fichiers sources de ce site ne peuvent pas être accessibles publiquement et je m’en excuse.

Je commencerai par vous expliquer les raisons du choix de ce projet, les réflexions que j’ai eues à ce sujet puis je vous détaillerai le fonctionnement actuel du site et la manière dont il a été réfléchi. J’ai ensuite dédié un chapitre spécifique pour son ergonomie qui était un aspect majeur, puis un à la programmation qui est bien plus technique. J’ai cependant tout de même pris la peine d’expliquer la signification de nombreux termes afin qu’ils soient compréhensibles par tous.

Vient ensuite un chapitre dédié à l’aspect graphique du site puis un dernier parlant de sa mise en production. Ce dernier chapitre concerne donc tout ce que j’ai pu faire et constater dans la deuxième partie de mon travail, depuis la fin des vacances d’été jusqu’à aujourd’hui.

Ce projet a été choisi dans le but de créer quelque chose qui puisse être utile à tous durant la période de mon TM et le rester par la suite. Il devait également me permettre d’améliorer grandement mes connaissances en développement web ainsi que mon expérience pratique.

Sur ce, je vous souhaite une bonne lecture en espérant que vous y prendrez plaisir.

 

 

 

 

 

 

 

 

 

1        Préparation du projet

1.1      Choix du sujet

Le premier point que je vais aborder traitera de la raison du choix de ce sujet.

 

A l’annonce du début des travaux de Maturité, j’ai immédiatement voulu chercher un sujet qui m’intéresse fortement, me permettant de me perfectionner et pouvant avoir une utilité durable pour tous.

La réponse est donc vite arrivée : je connaissais les bases de la programmation web et, étant très intéressé par le sujet, je souhaitais me perfectionner et enfin pouvoir créer un véritable site. Jusqu’alors, je n’avais créé qu’un seul site, plutôt sommaire, n’ayant que peu de gestion dynamique.

La deuxième question, bien plus difficile, se posait donc : à quoi servirait ce site ?

 

Il fallait bien sûr un sujet sérieux, suffisamment intéressant et pas trop ambitieux. Après avoir réfléchi à diverses possibilités, tel qu’un jeu par navigateur (mais trop difficile à réaliser sur la période donnée), je suis arrivé à l’idée de PetitsJobs.ch que nous allons maintenant détailler. En réfléchissant, je me suis dit qu’une personne cherchant un médecin, un informaticien, un coiffeur ou tout autre métier exercé par des professionnels qualifiés reconnus n’aurait pas trop de peine à en trouver grâce, entre autres, aux annuaires téléphoniques. Maintenant, lorsqu’il s’agit de trouver une femme de ménage, un baby-sitter, un jardinier non-professionnel pour de petites tâches ou encore un étudiant pour d’autres petits boulots, il est bien plus difficile et presque obligatoire de passer par des petites annonces ou par des connaissances.

J’ai donc réfléchi à un portail permettant la mise en relation facile de personnes offrant différents petits services à domicile avec tout un chacun.

 

Bien sûr, la concurrence dans ce domaine est élevée et la promotion d’un site aussi gros est difficile. Il fallait donc trouver des particularités à mettre en avant afin de se différencier. J’ai donc décidé de ne m’adresser qu’aux étudiants entre 14 et 23 ans, ce qui est un critère de qualité pour certains. En allant sur le site, vous avez la « garantie » que toutes les annonces présentes ont été créées par des étudiants cherchant à gagner un peu d’argent de poche. Bien sûr, il est impossible de contrôler la réelle identité des annonceurs mais un homme de 60 ans se faisant passer pour un étudiant ne parviendrait pas à se faire payer en se rendant chez l’employeur et ce ne serait donc pas dans son intérêt de falsifier son identité.

La deuxième distinction a été celle du sens des annonces : les étudiants proposent leurs services et les employeurs répondent aux offres.

Cela permet non seulement la simplification de la programmation mais également de l’ergonomie du site : on y retrouve une liste d’étudiants et non pas des annonces. Cela permet une complémentarité avec les sites similaires n’offrant parfois que la possibilité de publier une annonce de recherche d’étudiant.

 

La recherche devait également être extrêmement simplifiée. Contrairement aux sites offrant des annonces, celui-ci devait s’apparenter à un « annuaire ». Les offres ne seraient pas composées que d’un simple texte mais de nombreux champs que les utilisateurs auraient remplis permettant une recherche selon les critères associés (canton, sexe, âge, catégorie d’offre,…).

 

1.2      Concurrence

Dans cette configuration également, la concurrence était loin d’être faible. Avant de me lancer dans ce projet, il était crucial de connaitre les sites similaires, leurs particularités, leurs avantages et leurs défauts.

Outre les nombreux sites suisses de petites annonces existants (anibis.ch, tradus.ch, petitesannonces.ch, romandie.ch, scout24.ch,…) il existait les sites faisant une concurrence plus forte étant plus proche de mon projet : adojobs.ch, petitboulot.ch, etudiants.ch et quelques autres.

Chaque cas a donc été étudié :

 

-        Etudiants.ch : Le site propose divers services d’aide aux étudiants, dont une section petits annonces. Le but principal de ce site n’étant pas la recherche d’emploi, cette partie du site n’est que relativement peu développée ne dispose pas d’un bon système de recherche. De plus, la quantité d’annonces présente est négligeable. Le site n’est donc pas un réel concurrent mais plutôt un partenaire potentiel permettant une complémentarité.

-        Petitboulot.ch : Le site est exclusivement dédié aux petites annonces de recherche de petits boulots et se rapproche donc beaucoup plus du projet. En regardant de plus près, on s’aperçoit que les annonces sont créées par des personnes de tout âge (adultes y compris) cherchant la plupart du temps un travail à plein temps. De plus, il s’agit d’un format d’annonces ne permettant pas une recherche aussi précise. Et pour finir, on peut soit créer une annonce de recherche d’employeur, soit une de recherche d’employé (PetitsJobs.ch ne proposant actuellement que la première possibilité). Mon site devait donc également offrir une complémentarité dans un secteur bien plus particulier et d’autres fonctionnalités non disponible ici.

-        Adojobs.ch : Cette fois-ci, le site représentait une « menace » bien plus importante pour la bonne mise en marche de mon projet. En effet, il s’agit du site le plus utilisé et le plus connu dans le domaine des petits jobs en Suisse romande (60 000 étudiants inscrits) et a également été conçu par des étudiants du gymnase de Burier, ce qui aurait pu créer un « conflit » interne, ce dernier étant soutenu par plusieurs professeurs. Mais au contraire ! Adosjob, tout comme PetitsJobs.ch, ne fonctionnait que dans un sens, mais le sens contraire : les employeurs rédigeaient des annonces auxquelles les étudiants pouvaient répondre, mais le service inverse n’était pas proposé. Mon site allait donc offrir une complémentarité parfaite, permettant aux étudiants n’ayant pas trouvé de travail sur adojobs de se rendre sur PetitsJobs.ch pour y créer une annonce, et adojobs permettrait aux employeurs n’ayant pas trouvé d’étudiant correspondant à leurs critères sur PetitsJobs.ch de créer une annonce de recherche.

Pour certains services très communs, tel que le baby-sitting, trouver un étudiant dans sa région est très facile : pas la peine donc de se fatiguer à rédiger une annonce alors qu’on a toute une liste de personnes habitant près de chez nous ! En revanche, si on a un besoin plus particulier requérant certaines compétences particulières, il est plus adapté de se rendre sur adojobs et de laisser les étudiants concernés postuler.

Maintenant, dans un deuxième temps, il est possible que petitsjobs.ch étende son domaine d’action en offrant des services similaires à ceux d’Adojobs mais ce n’était pas un problème dans un premier temps.

 

1.3      Choix du nom

Le choix du nom d’un site internet est plutôt particulier car il implique que le nom de domaine correspondant soit disponible. Mon choix s’est donc porté sur ces différents critères :

-        Il devait s’agir d’une extension en .ch car le site ne devait être adressé, du moins dans un premier temps, qu’au public suisse. De plus, la disponibilité est plus grande, le .ch a une meilleure connotation, le référencement Google interne à la Suisse est meilleur et il est assez court (2 lettres). C’est donc un choix tout à fait évident.

-        Le nom devait être le plus court possible. Un nom court augmente la probabilité de mémorisation de la part des gens, diminue le temps nécessaire pour le taper, augmente les chances de visite (un nom court à taper motive les gens à aller visiter un site) et augmente le référencement (Google préférant les url courtes). Il s’agit bien sûr d’avantages mini mes mais non négligeables.

-        Le nom ne devait pas comporter de traits d’union. Les traits d’union rallongent la longueur de l’url. De plus, la convention générale actuelle fait que la quasi-totalité des grands sites internet n’ont pas de traits d’union dans leur nom principal. A cela s’ajoute qu’en cas de doute, une personne devant taper l’url d’un site mais n’étant pas sûr de sa syntaxe exacte choisira la version sans trait d’union en premier. Graphiquement, l’absence de trait d’union est favorable. Le seul défaut de l’absence de séparateur dans le nom d’un site est son référencement : Google considère le trait d’union comme un séparateur de mots et référencera donc mieux chacune des parties du nom du site.

-        Le nom devait comporter des mots clefs importants permettant au site d’être plus facilement référencé sur d’autres recherches que les gens pourraient faire sans chercher précisément le site. Exemple : La recherche « Etudiant pour petits jobs » sera optimisée du fait que le nom de domaine comporte déjà « petits » et « jobs ».

-        Bien sûr, un nom révélateur indiquant clairement le contenu du site.

-        Un nom qui sonne bien, peut facilement être prononcé et ne dérange pas l’oreille.

-        Et finalement, bien sûr, un nom qui est disponible et ne pourrait pas donner de confusion avec un autre site ou service déjà existant.

Description : http://www.novagraaf.ch/files/48952/WWW.jpgLe choix final s’est donc porté sur www.petitsjobs.ch qui correspondait à tous les critères et était bien heureusement disponible.

A un moment, la question du choix de « job » s’est posée : l’utilisation de cet anglicisme relativement peu littéraire est-elle bonne ? Oui, je pense que le choix était bon. Cela permettait, outre le fait de n’être composé que de trois lettres, de donner un caractère moderne et jeune au site. L’utilisation d’un nom du type de www.petitstravaux.ch ou www.petitsemplois.ch n’aurait effectivement pas été très adaptée.

Pourquoi au pluriel ? Effectivement, le nom du site comporte deux « s », représentant les jobs au pluriel. Effectivement, cela rallonge le nom de deux caractères, ce qui représente une grande différence par rapport à la taille totale de l’url. La raison peut être très facilement comprise : on trouve sur ce site plusieurs étudiants offrants de travailler dans plusieurs domaines. La question de la signification était donc claire, mais la raison principale de ce choix était plutôt axée sur l’indisponibilité de www.petitjob.ch qui était alors déjà acheté (pas utilisé mais acheté). Quelques mois plus tard, juste après le lancement du site, j’ai constaté que ce dernier s’était libéré et je l’ai donc acheté également et redirigé sur www.petitsjobs.ch. Il m’était malheureusement impossible de définir ce dernier en tant que nom principal car cela aurait impliqué un changement du logo et des backlinks déjà présents sur d’autres sites et donc à une baisse du référencement Google (qui n’aime pas les changements de nom). De toute manière, posséder plusieurs noms de domaines redirigeant sur la même adresse est une bonne chose car, en plus de permettre aux gens se trompant lorsqu’ils écrivent l’adresse d’être redirigés sur le bon site, cela augmente également le référencement sur les mots clefs présents dans le deuxième nom de domaine.

2        Fonctionnement du site

Tous ces choix étant maintenant faits, il était important de réfléchir comment le site allait fonctionner : globalement et en détail.

Voici donc un résumé de toutes les réflexions qui ont été faites lors de l’élaboration de ce projet, pour chaque partie du site. Dans cette partie ne seront détaillées aucunes questions d’ordre directement informatique.

2.1      Inscription

Il est évident qu’un site d’annonces nécessite un système d’inscription afin de pouvoir gérer ses annonces et en créer de nouvelles sans devoir réintroduire les mêmes informations plusieurs fois. Cependant, si l’inscription peut être évitée, elle doit l’être.

A la base, il avait été prévu d’offrir la possibilité aux étudiants et aux employeurs de s’inscrire avec deux systèmes différents. L’inscription des employeurs devait leur permettre l’envoi de messages privés, l’ajout de favoris et diverses fonctionnalités de ce genre mais a été jugée inutile et fastidieuse. Pour simplifier le site au maximum, l’inscription ne concerne donc que les étudiants.

Toujours dans un souci d’ergonomie, les champs nécessaires à l’inscription ont été réduits au minimum.  Il n’est donc nécessaire que d’introduire un pseudo (servant à la connexion), une adresse e-mail (récupération de mot de passe, contact,…), son âge (puisque le site ne doit être accessible qu’aux jeunes entre 14 et 23 ans) ainsi que la ville, permettant au moins une recherche par canton.

Ainsi, l’inscription est possible en moins de 30 secondes.

2.2      Identifiant de connexion

Un choix important devait également être pris concernant la connexion : il faut bien sûr un mot de passe mais aussi un login. Dois-je demander l’utilisation de l’adresse e-mail ou celle d’un pseudo ?

Mon choix s’est finalement porté sur l’utilisation d’un pseudo lors de l’inscription estimant que cela pourrait s’avérer plus simple pour certaines raisons. Le pseudo est généralement plus court, il ne change pas et a généralement moins de chance d’être oublié dans le cas où certaines personnes auraient plusieurs adresses e-mails. L’absence de pseudo aurait tout à fait pu être fonctionnelle mais risquait de poser problème dans le cas d’éventuels ajouts de fonctionnalités futures.

2.3      Accessibilité des annonces

Puisque les employeurs n’ont pas de compte, il faut donc que les annonces soit accessibles à tous. Il a donc été décidé que la totalité des annonces serait affichée publiquement, ce qui simplifie la démarche des utilisateurs mais permet également à ces dernières d’être référencées par Google.

Le référencement des annonces elles-mêmes est un point important qui devait être prévu pour la suite du TM. Une fois que le site aura acquis une certaine notoriété dans les moteurs de recherche, les annonces des membres pourront également être retrouvées avec certains critères ce qui permettra à certains étudiants d’être mis en relation avec des employeurs par ce biais.

2.4      Contenu des annonces

Le contenu des annonces doit se baser sur trois choses :

-        Les informations du membre (CV) : adresse e-mail, loisirs, maitrise des langues, canton,…

-        Les informations propres à l’annonce : prix, titre, catégories, à domicile,…

-        Le texte de l’annonce : texte principal qui est affiché au début de chaque annonce, suivit par toutes les informations précédemment citées.

Avant de créer une annonce, le membre doit donc indiquer ses informations personnelles (son Curriculum Vitae) qui contiennent toutes les données fixes qui sont identiques à toutes les annonces.

Il est important de m’assurer que ces champs soient remplis et tenus à jour. Par conséquent, j’ai décidé que la page d’accueil visible lorsqu’un étudiant est connecté serait celle du CV, pour qu’il le voit immédiatement à chacune de ses connexions et pense à le compléter/mettre à jour. Effectivement, la page d’accueil habituelle (pour les employeurs et les membres non connectés) fait plutôt office de page-vitrine ayant pour but de :

-        Donner envie aux gens de rester sur le site (bonne présentation, attractif)

-        Indiquer ce que le site va contenir (description du site, fonctionnement)

-        Donner des statistiques prouvant la réputation du site

-        Orienter les gens vers les bonnes sections (principalement grâce aux deux boutons animés, un pour les étudiants menant au formulaire d’inscription et un pour les employeurs menant à la recherche d’annonces)

-        Permettre aux moteurs de recherche de mieux référencer les nouvelles annonces grâce à l’espace « Dernières annonces publiées »

Par conséquent, les membres connectés (donc connaissant déjà le site, ayant déjà un compte) n’ont pas besoin d’avoir accès à cette page. La remplacer par celle de l’édition du CV simplifie alors la navigation.

Une fois le CV rempli, les membres sont invités à la création d’une annonce en y accédant soit par la barre du haut de la page, soit par le rappel des étapes principales dans le menu de gauche, soit par le lien s’affichant une fois le CV modifié.

Dans cette page, ils n’ont plus qu’à se laisser guider en remplissant les champs et rédigeant un court texte personnalisé.

2.5      Catégories des annonces

Pour permettre aux employeurs de retrouver facilement les annonces correspondant à leurs besoins, il fallait créer un système de catégories. Le premier problème était de savoir si une annonce pourrait appartenir à plusieurs catégories à la fois, ou s’il faudrait créer une annonce pour chaque catégorie. En pensant au fait que certains étudiants seraient prêts à travailler dans une dizaine de domaine, créer 10 annonces ne ferait que les décourager, ce qui réduirait fortement les chances qu’ils utilisent le site, ou ils risqueraient de faire un copier-coller du même texte pour chaque annonce, ce qui serait encore moins bien. A cela s’ajoute les étudiants qui ne voudraient travailler que dans un seul domaine, lequel serait compris dans plusieurs catégories. Exemple : « Etudiant propose services informatiques. Catégories : Aide Informatique, Saisie de données, résolution de problèmes »

Le choix a donc été fait : une annonce peut appartenir à n’importe quel nombre de catégories, comme dans l’exemple précédent.

Venait ensuite le choix des catégories à créer. Les premières étaient donc intuitives (cours, aide informatique, baby-sitting, jardinage,…) mais certaines étaient beaucoup plus particulières (figurant, Disc-Jockey, Vendanges,…). La liste était donc non-exhaustive et a été augmentée au fur et à mesure que les idées (et propositions) venaient.

Mais en pensant, notamment, à la catégorie « cours », un problème surgissait : les sous-catégories. Cours, c’est bien, c’est court, mais certaines personnes ne souhaiteront proposer que des cours de maths, que des cours d’anglais ou que des cours de guitare. Effectivement, ces derniers n’ont rien à voir et il fallait donc donner la possibilité de n’inclure que certains choix.

Je ne pouvais pourtant pas traiter « Cours de Maths » et « Cours d’économie » comme deux catégories entièrement distinctes : elles appartenaient clairement à l’ensemble « cours » et les rassembler allait permettre de grandement clarifier la classification. J’ai donc créé un système de sous-catégories permettant à une catégorie d’être attribuée à une autre.

Les catégories doivent normalement être affichées par ordre alphabétique. En choisissant une catégorie comportant des sous-catégories, la liste de ces dernières s’affiche juste en-dessous. On peut choisir une catégorie principale sans choisir une sous-catégorie, mais lorsqu’on choisit une sous-catégorie, l’annonce est automatiquement ajoutée à la catégorie principale correspondante.

Au total, 52 catégories et sous-catégories ont été créées sur toute la durée du projet.

2.6      Durée de Publication

Un des atouts du site devait être d’avoir des annonces d’actualité, non pas des annonces vieilles de plusieurs années dont les propriétaires sont maintenant dans la vie active et n’ont simplement pas pris la peine de les enlever.

Lors de la création d’une annonce, un champ « durée de publication » est donc présent, permettant aux membres de choisir au bout de combien de temps l’annonce sera automatiquement supprimée. Par défaut, la valeur inscrite est de 6 mois mais il est possible d’entrer une valeur entre une heure et six mois. Bien sûr, la plupart du temps les gens choisissent la valeur par défaut mais dans certains cas il arrive qu’ils fassent un choix différent pour des raisons particulières.

A n’importe quel moment, le membre peut prolonger son annonce depuis le menu « gestion des annonces » qui sera détaillé plus loin.

Lorsqu’il reste moins d’un mois à une annonce avant d’être détruite, son propriétaire reçoit un e-mail l’en avertissant. Il n’a plus qu’à cliquer sur le lien fourni et l’annonce est prolongée du temps indiqué lors de sa création. Seules les annonces dont la durée de publication de base dépassait les 45 jours sont concernées par cette fonctionnalité.

Un e-mail du même type est également envoyé une semaine avant la date de suppression. Ce message ne concerne cette fois-ci que les annonces ayant été publiées pour plus de 2 semaines.

Une fois la date passée, les annonces sont automatiquement détruites et leur propriétaire averti.

2.7      Gestion des annonces

Pouvoir créer une annonce appartenant à plusieurs catégories ne doit pas empêcher une personne de créer plusieurs annonces. Effectivement, une personne peut vouloir créer une annonce personnalisée pour chaque catégorie avec un texte adapté, ce qui augmente ses chances de trouver un employeur, ou utiliser la méthode simple en créant une annonce polyvalente et en cochant toutes les catégories. Dans la pratique, on verra par la suite que la plupart des gens ont choisi cette deuxième méthode mais que certains ont appliqué la première et que le rendu dans ces cas-là est meilleur.

Un menu « Gérer mes annonces » est donc disponible pour tous les membres connectés.

Depuis ce dernier, ils ont un tableau récapitulatif de toutes les annonces qu’ils possèdent avec pour chacune le nom, leurs catégories et la date d’expiration. En cliquant sur la colonne correspondante, ils peuvent trier leurs offres par ordre croissant ou décroissant de date, nom ou catégories.

Pour chaque annonce, ils disposent également de quatre actions disponibles :

*     : Afficher l’annonce (redirection vers la version de l’annonce visible publiquement).

*     : Modifier l’annonce (accès à l’interface de modification des annonces. A noter qu’une annonce modifiée voit sa date d’expiration automatiquement repoussée).

*     : Prolonger l’annonce (réinitialise le temps de publication de l’annonce, comme expliqué au chapitre précédent)

*     : Supprimer l’annonce (détruit définitivement l’annonce)

2.8      Recherche d’annonces

La recherche d’annonce est l’une des deux grandes parties du site, avec l’espace membres. Les employeurs n’étant pas concernés par la création d’annonces, il fallait qu’ils comprennent clairement où se rendre pour trouver les étudiants qu’ils cherchent. Ainsi, l’accès au système de recherche se fait par de nombreux moyens.

Lorsqu’on arrive sur la page d’accueil, on remarque rapidement le grand carré bleu indiquant « Je cherche les services d’un étudiant pour… ». En cliquant dessus, on arrive sur une page « Recherche par catégorie » donnant quelques informations de bases et permettant de choisir une catégorie d’annonces dans un menu accordéon simplement en cliquant dessus. Ils peuvent aussi entrer des mots-clefs dans le champ de recherche prévu à cet effet.

En faisant ainsi, ils sont simplement redirigés sur la page de recherche avancée mais le champ « catégorie » ou « mots-clefs » est pré-rempli et toutes les annonces correspondant à leur demande s’affiche sur la page. Ils peuvent ensuite, s’ils le souhaitent, affiner leur recherche en ajoutant des critères mais cela leur évite d’arriver directement sur un formulaire complexe. De plus, le choix d’une catégorie dans un menu accordéon est bien plus esthétique que de devoir parcourir une longue liste déroulante.

La recherche avancée est aussi disponible depuis n’importe quelle page du site grâce à l’espace en haut à droite.

Pour les connaisseurs, il est possible de cliquer directement sur le bouton « Recherche avancée » qui se trouve en haut de l’écran. Ils arrivent sur la même page d’affichage d’annonces, mais cette fois-ci les champs ne seront pas pré-remplis et ils peuvent le faire directement.

Les résultats des recherches s’affichent automatiquement dès qu’un champ est modifié. Ainsi, les utilisateurs n’ont pas besoin de cliquer sur un bouton rechargeant la page.

Seuls les éléments les plus importants ont été conservés pour la recherche. J’avais à la base voulu programmer de très nombreux critères extrêmement particuliers mais j’ai finalement abandonné cette idée, non pas à cause de sa complexité mais car l’interface devenait difficile à comprendre. Il reste donc maintenant les possibilités de tri suivantes :

-        Catégorie : n’affiche que les annonces de la catégorie/sous-catégorie choisie. Il s’agit du critère principal. J’avais autrefois prévu un système permettant de n’afficher que les annonces étant présentes dans un certain nombre de catégories à la fois, mais cela était relativement peu utile et très complexe pour l’utilisateur.

-        Mots-clefs : n’affiche que les annonces dont au moins l’un des champs contient les mots-clefs choisis (cherche dans le texte de l’annonce, les catégories, le nom, le prénom, l’adresse, etc.).

-        Sexe : n’affiche que les annonces dont l’auteur est du sexe voulu (certaines personnes pourraient vouloir, par exemple, uniquement une femme pour donner des cours à leur fille)

-        Canton : n’affiche que les annonces dont l’auteur habite dans le canton prévu. A la base, il était également possible de choisir une ville, mais un tri par ville était trop restrictif pour pouvoir être utilisé (cela excluait les habitants de petits villages voisins). Un tri par région serait une amélioration à effectuer : cette possibilité d’ajout sera détaillée plus loin.

-        Âge : n’affiche que les annonces dont l’auteur a un âge compris entre les deux valeurs choisies. De nombreuses personnes peuvent, par exemple, souhaiter confier leurs enfants à des personnes de plus de 16 ans pour du baby-sitting. Un système plus pointu aurait pu donner la possibilité d’un tri par date de naissance plutôt que par âge, mais cela aurait également embrouillé l’utilisateur inutilement.

-        Ordonner selon… : permet de trier l’affichage des annonces selon un certain ordre. Les possibilités de tri retenues sont « Âge », « Nom » et « Date de publication ». J’avais autrefois ajouté « Prix », mais la plupart des gens n’indiquant pas le coût de leurs services et les unités d’œuvre variant selon les cas, je l’ai jugée fastidieuse. Les tris peuvent bien sûr se faire par ordre croissant ou décroissant.

Afin que les employeurs puissent facilement distinguer les annonces correspondant à leurs besoins simplement en regardant les résultats de leur recherche, j’ai décidé de n’afficher que les informations suivantes dans la partie des résultats sous la forme de barres rectangulaires extensibles selon la résolution de l’écran des utilisateurs. Dans chaque coin des rectangles se trouve donc respectivement :

-        Le titre de l’annonce (en gras pour montrer son importance)

-        Les catégories dans lesquelles elle figure (séparées des virgules. Liste automatiquement tronquée si espace insuffisant)

-        Les 120 premiers caractères du texte de l’annonce (le début est très souvent révélateur de l’annonce dans son ensemble)

-        La ville de l’annonceur ainsi que le canton qui y correspond entre parenthèses. Les employeurs faisant généralement une recherche par canton, l’indication de la ville est une information importante pouvant les orienter

En cliquant sur une annonce, afin de ne pas perdre ses critères de recherche, elle s’ouvre dans un nouvel onglet.

2.9      Aide / F.A.Q. du site

Le site a été conçu dans le but qu’aucune formation ne soit nécessaire afin de comprendre pleinement son fonctionnement. Cependant, j’ai décidé de quand même y intégrer une F.A.Q. (frequently asked questions, ou foire aux questions) qui devait contenir toutes les informations que certaines personnes pourraient se poser.

L’utilisation de cette page d’aide ne devrait être aucunement utile pour la majorité des utilisateurs car les informations dont ils ont besoin leur sont indiquées au fur et à mesure des étapes qu’ils franchissent (boutons explicites à l’arrivée du site, inscription guidée, consignes pour la complétion du CV puis l’ajout et modification d’annonces, etc.). Cependant, elle permet principalement de les rassurer quant à la gratuité du site, la confidentialité des données, la sûreté du système, la possibilité de désinscription, etc.

Comme dans la plupart des F.A.Q., on trouve en haut de page la liste de toutes les questions qui s’y trouvent. En cliquant sur l’une de ces dernières, on arrive directement à la partie de la page qui en contient la réponse.

Les réponses sont la plupart du temps succinctes et doivent être facilement comprises par les utilisateurs. On retrouve dans chaque réponse des liens vers les pages concernées.

Même si elle est peu utilisée, la F.A.Q. possède un effet rassurant du simple fait de sa présence dans le menu principal du haut. On sait vers où se tourner en cas de problème.

 

 

 

2.10   Réseaux Sociaux

J’ai voulu mettre en avant l’utilisation des réseaux sociaux dans la promotion durable du site (comme vous pourrez également le voir au chapitre concernant son lancement). Leur utilisation devient désormais un atout majeur auprès des sites touchant un public jeune et encore plus particulièrement depuis que Google a officiellement annoncé tenir compte de la réputation des sites web auprès des réseaux sociaux dans son algorithme de référencement.

De ce fait, on peut trouver sur n’importe quel page du site, dans le menu de gauche, un bloc contenant les habituels boutons de Facebook, Twitter et Google Buzz.

Le bouton Google Buzz prend simplement compte du fait que vous aimez ce site et en informe Google (pour son moteur de recherche) ainsi que vos contacts de compte Google.

Le bouton Twitter, quant à lui, vous permet de suivre la page officielle de PetitsJobs.ch sur Twitter. A chaque fois qu’une nouvelle annonce est postée sur le site, ce compte est mis à jour et un tweet automatique est posté, ce qui le rend actif.

Le bloc Facebook est lui bien plus grand. La raison principal le est que Facebook est le réseau social le plus utilisé en Suisse. En cliquant sur « J’aime », on indique qu’on aime la page officielle de petitsjobs.ch et pas uniquement le site. Sur cette page, tout comme sur le compte Twitter, sont automatiquement postées des messages informant les personnes suivant la page qu’une nouvelle annonce est postée. Cela permet, en plus d’améliorer le référencement Google, de rappeler régulièrement aux personnes suivant la page de l’existence du site ainsi que de son activité permanente.

3        Ergonomie d’utilisation

Comme indiqué dans la partie du choix du projet, l’ergonomie devait être un des atouts majeurs du site.

Vous aurez pu le constater en lisant le chapitre précédent sur le fonctionnement du site que j’ai étudié tant que possible à simplifier au maximum le fonctionnement des différentes pages du site. Je vais donc détailler les principaux éléments allant dans ce sens dans ce chapitre.

3.1      Instructions explicites

Sur chaque page du site, j’ai veillé à placer un champ d’aide à son sommet afin que l’utilité de cette dernière soit clairement comprise dès l’arrivée de l’utilisateur.

Les nouveaux visiteurs liront donc immédiatement ce texte et comprendront donc facilement l’utilité et le fonctionnement de la page. Les anciens, quant à eux, sauteront directement ces paragraphes y étant habitués et n’en seront pas dérangés.

A côté des champs de texte qui en ont besoin, un complément d’information est indiqué entre parenthèses.

Là encore, les habitués n’y prêteront pas attention.

Lorsqu’un visiteur valide une action, il faut également qu’il comprenne pleinement ce qu’elle va faire. Pour cette raison, tous les boutons de validation de formulaire disposent d’un texte clair sur leur impact.

Dans la même logique, tous les liens du menus et présents sur les pages sont clairement nommés. S’ajoute à cela qu’une bulle d’aide apparait en passant le curseur de la souris au-dessus.

3.2      Ordre implicite des étapes

L’action suivante à effectuer devait être implicite. Le but étant donc que l’utilisateur n’ait pas à se demander « Que dois-je faire maintenant ? ».

Dès son arrivée sur le site, l’utilisateur verra le texte de présentation qui le renseignera immédiatement sur le contenu du site. Il comprendra alors son fonctionnement global et n’aura pas besoin d’aller plus loin pour se renseigner sur ses objectifs.

Une fois l’information lue, il aura vu grâce aux statistiques visibles sur la page d’accueil que le site a une certaine réputation et qu’il est donc actif (statistiques indiquant le nombre d’étudiants inscrits et le nombre d’annonces actives). Qu’il soit étudiant ou employeur, il parcourra le reste de la page en cherchant d’éventuelles instructions sur la marche à suivre.

Rapidement, il tombera sur deux gros blocs qui attireront son attention.

En lisant le texte contenu sur ces derniers, il repérera rapidement l’élément correspondant exactement à ses besoins du fait de la phrase inscrite (« Je suis étudiant, cherche un petit job et offre mes services pour… » ou « Je cherche les services d’un étudiant pour… »). Se sentant directement concerné par cela, il placera son curseur dessus et, à ce moment-là, l’image s’agrandira, celle qui ne le concerne page rétrécira et deviendra transparent. De plus, une petite bulle noire explicative apparaitra. Cela lui fera immédiatement saisir qu’il est incité à cliquer pour continuer sa démarche…

Dans le cas des employeurs, ils seront alors redirigés sur la page de recherche par catégorie, comme expliqué au chapitre du fonctionnement du site, dans la partie de la recherche d’annonces. L’ergonomie de ce système avait été détaillée dans cette partie, chose qui ne sera pas refaite ici. Elle amenait directement les utilisateurs aux annonces qu’ils recherchaient de manière très claire.

Dans le cas des étudiants, puisque leur inscription est obligatoire pour utiliser le site, cliquer sur ce bouton les redirige vers la page d’inscription. Après leur inscription terminée, ils sont ensuite accompagnés vers la page d’édition de leur CV, qui est la page d’accueil par défaut de tout étudiant connecté, puis, une fois le CV complété, vers la page de création d’annonce puis, une fois l’annonce créée vers la page de gestion des annonces leur indiquant les possibilités qu’ils ont (voir partie sur la gestion des annonces du chapitre précédent).

En arrivant sur la page de création d’annonce, il leur est rappelé qu’il leur faut préalablement tenir leur CV à jour avant toute création d’annonce. S’ils se rendent sur la page de gestion des annonces alors qu’ils n’en ont pas encore, ils sont également invités à en rédiger une.

On voit donc que dans tous les cas il leur est très difficile de brûler les étapes et qu’ils sont toujours ramenés au bon endroit.

En étant connecté, comme cela avait déjà été dit, les 3 étapes principales sont rappelées en permanence dans le menu de gauche. En cliquant sur les blocs bleus, ils sont dirigés vers la partie correspondant à l’action inscrite. A tout cela s’ajoute la page d’aide disponible dans le menu du haut.

3.3      Suppression des éléments peu utiles

De nombreux éléments peu utiles voire inutiles ont été supprimés pour que l’utilisateur ne se perde pas.

Le système de recherche avancée, par exemple, a été épuré comme cela avait été expliqué dans la partie de la recherche d’annonces du chapitre précédent : seuls quelques champs  principaux ont été conservés.

Il en est de même de la quantité des pages présentes sur le site. Elles sont vraiment très peu nombreuses, mais rien n’y manque. Prenons l’exemple de la page d’accueil ordinaire : elle a été supprimée pour les utilisateurs connectés. Les membres n’ayant plus besoin d’être guidés lors de leur arrivée sur le site, l’accès direct à leur CV est préférable.

3.4      Pages importantes accessibles de partout

Les pages importantes du site, soit presque toutes grâce à « l’épuration » dont j’ai parlé à la partie précédente, sont toutes accessibles depuis de très nombreux emplacements.

Le menu animé du haut permet d’accéder aux 4 pages les plus importantes du site pour les membres connectés ou déconnectés. Ce menu est fixe et permet d’arriver sur ces dernières depuis n’importe quel endroit du site. Il s’agit donc d’un menu tout à fait ordinaire.

Cependant, malgré qu’il soit accessible depuis partout, cela ne m’a pas empêché de créer de très nombreux liens vers ces pages. En lisant la description du site de la page d’accueil, on retrouve déjà deux liens vers la page de recherche avancée ainsi qu’un lien vers la recherche simple grâce au bouton animé pour les employeurs. A cela s’ajoute les nombreux liens disponibles sur la page d’aide.

Les liens de la barre de membres du haut sont eux aussi accessibles depuis de nombreuses pages.

La création d’annonce est accessible depuis :

-        Toutes les pages du site en étant connecté grâce au rappel des fonctionnalités importantes du menu de gauche

-        La page de gestion des annonces pour ceux qui n’en ont pas encore

-        La F.A.Q. du site pour certaines questions

-        La page de modification du CV

De même pour la page de gestion des annonces, etc.

Il fallait donc vraiment qu’on n’ait pas à chercher là où on veut aller.

4        Programmation

Toutes les questions directement liées à l’informatique seront traitées dans ce chapitre.

4.1      Choix des langages utilisés

Cette partie se veut relativement simplifiée et devrait être compréhensible par un lecteur n’ayant jamais créé de sites internet.

Description : http://www.suvi.org/htmleditor/html-text.jpgLe choix des langages utilisés pour le développement de ce site était plutôt évident. Certains des éléments cités ne seront pas réellement des langages de « programmation » (pas de conditions du type if, else, pas de fonctions, etc.) mais des types de structures très spécifiques au développement web.

Le premier, bien sûr, est le html. Le html est le langage utilisé dans presque tous les sites internet du monde. Il est le plus connu, le plus compatible et le plus simple à manier.

Il sert principalement à contenir le corps du site ainsi que tous les éléments de sa structure (textes, images, boutons, champs texte, etc.)

La version utilisée de ce langage est le html 5 qui est sorti très récemment. Actuellement, certains anciens navigateurs (malheureusement encore très courants) ne supportent pas pleinement cette version, raison pour laquelle les fonctions majeures du site n’utilisent donc pas cette technologie afin d’être compatibles.

 

Description : http://static.commentcamarche.net/www.commentcamarche.net/faq/images/9100-css-logo-medium-s-.pngLe deuxième langage utilisé est le CSS, s’alliant naturellement au html et permettant la structuration graphique des éléments du html. Grâce à ce dernier, il est possible notamment d’intégrer une image/couleur de fond aux différentes parties du site, changer la police, la taille des caractères, ajouter des bordures aux images, etc. Il s’agit également d’un langage extrêmement connu et très utilisé. La version utilisée est le CSS 3. Tout comme le html 5, il n’est pas compatible avec certains navigateurs, mais déjà bien mieux supporté. Jugeant que les éventuels défauts de compatibilité étaient minimes (petites différences d’affichage), plusieurs de ses fonctionnalités ont été utilisées à de nombreuses reprises (notamment pour la création d’arrondis et d’ombres, demandant normalement plusieurs dizaines de lignes de code).

Description : http://www.yannick-lohse.fr/wp-content/uploads/2010/05/javascript_logo.jpg

Le site compte également beaucoup sur le JavaScript. Le JavaScript est cette fois-ci un langage de programmation permettant, entre autres, d’effectuer des actions particulières lors de certains évènements déclenchés par l’utilisateur (passer la souris au-dessus de quelque chose, cliquer, double-cliquer, etc.) ou d’animer certains éléments (tel que la barre de connexion en haut qui se déroule).

Il est visible (donc on peut le voir en affichant le code source d’une page) et est ensuite interprété par votre navigateur internet. Une fois la page chargé, le JavaScript fonctionnera toujours même si vous n’êtes plus connecté à internet car c’est votre ordinateur lui-même qui le fait fonctionner. De ce fait, il est aussi peu fiable car peu facilement être modifié par n’importe qui.

 

Description : http://developpements.org/wp-content/uploads/jquery-logo.pngPetitsjobs.ch utilise fortement deux « librairies JavaScript » : Mootools et jQuery.

Il ne s’agit pas de langages de programmation à proprement parler mais de gros fichiers plein de lignes de code presque incompréhensibles permettant d’augmenter les possibilités ordinaires du JavaScript.

Sur chaque page du site, ces librairies sont chargées. Concrètement, elles n’ajoutent pas de fonctionnalités mais permettent de considérablement simplifier le reste du code et d’effectuer en 10 lignes ce qui aurait normalement demandé des centaines de lignes de code.

Voici l’exemple de la librairie jQuery : http://www.petitsjobs.ch/app/jquery-1.6.1.min.js

Description : http://www.roul.fr/img/front/logo/logo_mootools.pngL’utilisation de ces dernières est un gain considérable permettant de faire certaines choses qui n’auraient normalement jamais été imaginées tellement cela était compliqué (tel que tout simplement le menu animé du haut). Cependant, elles demandent tout de même un apprentissage spécifique car ne fonctionnent pas du tout comme le JavaScript pur et disposent de centaines de fonctions propres.

Ces librairies sont relativement connues (surtout jQuery) mais ne sont pas nécessairement utilisée par tout le monde (soit car ils n’en ont pas la connaissance, soit car ils ne savent pas les utiliser, soit car ils n’utilisent que très peu de JavaScript dans leur site et cela ne vaut donc pas le peine de les intégrer, soit car, pour une raison ou pour une autre, ils préfèrent utiliser du JavaScript « pur »). Leur utilisation n’est donc pas marginale et est de plus en plus courante sur le web.

 

Description : http://amelioration.fr/wp-content/uploads/2011/04/logo-php.pngL’intégralité du site utilise également, et fortement, la version 5.3. de PHP. Ce dernier, à la différence des autres langages, s’exécute avant le chargement de la page du côté du serveur. C’est-à-dire que peu importe le navigateur que les visiteurs ont, ils ne sont pas concernés par ce code. C’est le serveur qui héberge le site qui va modifier le contenu à afficher sur la page que les visiteurs verront ensuite (et ne pourront donc pas le modifier ce qui le rend fiable). Lorsqu’un utilisateur charge une page, le serveur en reçoit l’information. En fonction de certaines informations (par exemple si l’utilisateur est connecté ou non, s’il a déjà créé une annonce, etc.), le serveur renverra du code html/css/JavaScript différent au navigateur internet, qui se chargera de l’afficher à l’écran mais n’aura pas à traiter du PHP.

PHP est également un langage utilisé par de nombreux site et est surtout entièrement gratuit, ce qui le rend très accessible.

Description : http://static.pcinpact.com/images/bd/news/96512-mysql-logo.jpg

PHP va souvent demander à MySQL d’effectuer certaines actions. MySQL est un système de gestion de bases de données. Sur un site internet, il y a principalement deux choses : les fichiers (qui peuvent contenir du texte, être des images ou des vidéos, etc.) et une ou plusieurs bases de données.

Une base de données n’est pas un fichier mais un endroit où sont stockées toutes les informations qui permettent au site de fonctionner (les coordonnées des membres, les annonces qu’ils ont rédigées, etc.) et qui changent régulièrement (le membre pourra modifier le contenu de son annonce sans problème) tandis que les fichiers restent généralement fixes et ne sont modifiés que lorsque les développeurs souhaitent faire des mises à jour de contenu ou des corrections de bugs.

C’est donc PHP qui s’occupe de demander à MySQL (selon une syntaxe particulière et parfois très compliquée qu’il faut également apprendre) d’enregistrer, modifier, détruire ou de lui donner le contenu de la base de données du site. Ex : « SELECT * FROM annonces WHERE annonce_id = 4 » permettra d’obtenir tout le contenu de l’annonce portant l’id numéro 4.

Il existe d’autres systèmes de gestion de bases de données mais MySQL est particulièrement adapté au PHP, est très utilisé et a le grand avantage d’être gratuit.

 

Description : http://vg.perso.eisti.fr/Documents/ProjetJEE/AAHFCL_iBatis_JSF/images/apache_logo.pngUn serveur, ça se configure. Il y a donc encore une chose à connaitre pour pouvoir programmer un site : Apache.

Le serveur est l’ordinateur qui va contenir toutes les informations nécessaires pour faire fonctionner le site. En tapant l’adresse du site, http://www.petitsjobs.ch, cela vous redirige vers l’IP du serveur qui va automatiquement ouvrir le fichier index.php qui se trouve à la racine du dossier contenant les fichiers du site. Normalement, ce qui s’affiche à l’écran devrait être uniquement du texte, mais le navigateur transforme ce texte en quelque chose de compréhensible par les êtres humains. Cependant, ce comportement doit lui être indiqué, sinon il ne saurait pas comment faire.

Heureusement, ces aspects extrêmement complexes n’ont pas besoin d’être maîtrisés pour la création d’un site internet. C’est généralement des choses qui sont préconfigurées lorsqu’on paye pour louer un serveur utilisable pour héberger un site. Par contre, certaines choses peuvent être adaptées selon les besoins particuliers de certains sites, raison pour laquelle existent, notamment, les fichiers .htaccess qui contiennent des directives de configuration pour les serveurs qui tournent grâce à Apache (une technologie qui ne sera pas détaillée) et qui nécessitent la connaissance d’une syntaxe particulière.

Dans ces fichiers, il sera possible, par exemple, de dire au serveur d’effectuer des redirections automatiques, de sécuriser certains dossiers avec un mot de passe, de renommer des fichiers, de choisir la version de PHP utilisée, etc.

 Mais là également, on peut s’en passer en partie car la configuration de base du serveur se fait généralement par une interface simplifiée. Une maîtrise minimum est tout de même requise afin de mieux comprendre le fonctionnement de son serveur et ses possibilités.

 

Toutes les structures précédemment citées ont donc été utilisées dans la conception de petitsjobs.ch

 

4.2      Compétences initiales

A partir de cette partie et pour tout le reste du chapitre 4, les termes utilisés ne seront pas simplifiés et pourront peut-être être difficilement compris de personnes n’ayant jamais programmé.

En me lançant dans le sujet, il ne serait pas adapté de prétendre que j’étais un parfait novice dans le sujet. J’avais effectivement déjà des connaissances dans la matière et déjà créé un site internet : bien plus simple, bien moins fait, bien moins programmé, mais cela était une prédisposition indispensable et non négligeable.

En effet, la conception d’un site tel que petitsjobs.ch aurait été véritablement impossible si je n’avais jamais fait de développement web, dû à la taille et la complexité du projet.

Je connaissais donc plutôt bien le (x)HTML et le CSS, bien le PHP et les bases du JavaScript malgré que je ne m’en étais encore que très peu servi.

 

Le site que j’avais conçu, un site contenant des articles d’aide pour un jeu en ligne auquel je jouais, était très mal structuré, malgré les 60 000 visiteurs par mois qu’il avait déjà. Les articles étaient certes stockés pour la plupart dans une base de données mais cette dernière était très mal conçue : je ne me référais pas à l’id de l’élément mais à son nom qui pouvait changer, certains champs n’avaient pas le type adapté, les mises à la ligne se faisaient parfois grâce à des <br/>, parfois grâce à des \n, les séparateurs utilisés dans les url était parfois des underscore, parfois des traits d’union, le nom de l’extension de la page variait selon les cas, etc.

 

La structure du site elle-même n’était pas réfléchie : la plupart des fichiers se trouvaient à la racine alors qu’ils devaient être dans des dossiers, les images n’étaient pas rassemblées du tout, il y avait deux fichiers d’en-tête différents et, souvent, je faisais des « copier-coller » de certains bouts de codes au lieu de les rassembler dans un même fichier ou une même fonction.

Le site disposait d’un espace de membres mais il était presque afonctionnel dû à ses nombreux bugs. De plus, je n’en étais même pas complétement l’auteur.

 

Pour ce qui était du design, je ne l’avais même pas fait moi-même : il comportait de nombreux bugs graphiques, n’était pas particulièrement réussi et, dès qu’il s’agissait de faire un changement, était impossible à modifier du fait de sa mauvaise structuration et de mes connaissances qui étaient bien plus limitée en CSS.

 

Le site n’utilisait que très peu de JavaScript et, quand il y en avait, venait souvent d’autres sites ou d’autres personnes. De plus, je ne soupçonnais même pas l’existence de librairies telles que jQuery ou Mootools.

 

Enfin bref, ce site avait été « collé » au fur et à mesure des choses que j’apprenais et était très difficilement modifiable. Malgré cela, l’expérience que j’avais acquise en développant ce premier site était importante. Ainsi, je me rendais compte des erreurs que j’avais déjà commises et que je ne devais en aucun cas refaire.

 

4.3      Structuration du site

La chose qui était la plus importante pour moi à ce moment-là était de partir sur de bonnes bases qui permettraient au site d’être facilement modifié et amélioré par la suite.

Voici donc les différentes choses qui ont été importantes pour la bonne structuration du site.

 

4.3.1       Organisation des fichiers

A la base, j’ai voulu séparer les fichiers utilisés pour le site selon les critères suivants :

-        Un dossier « admin », placé à la racine, doit contenir tous les fichiers qui ne concernent que l’administration du site et dont l’accès est réservé aux administrateurs.

-        Un dossier « membres », placé à la racine, doit contenir tous les fichiers en relation avec le système de membres.

-        Un dossier « images », placé à la racine, doit contenir toutes les images que le site utilise.

-        Un dossier « app », placé à la racine, doit contenir tous les fichiers open source que je n’ai pas codé moi-même mais qui ont été téléchargés et sont utilisés sur le site.

-        Tous les autres fichiers concernant le site dans son ensemble (index.php, sitemap.xml, robots.txt, etc.) ou les visiteurs non connectés devaient être placés à la racine.

-        Accessoirement, un dossier « test », placé à la racine, a été créé afin d’y placer des copies de fichiers devant servir aux tests avant d’être définitivement mis en ligne.

Par la suite, cette structure n’a quelques fois pas été entièrement respectée. Par exemple, le fichier faq.php contenant la page d’aide, ainsi que d’autres, ont été placé dans le dossier « membres » pour ne pas trop encombrer la racine du site. A ce moment, j’aurais dû renommer le dossier en quelque chose de plus explicite mais cela était déjà devenu trop compliqué.

Un dossier « images » a été créé à l’intérieur du dossier « membres » et devait contenir les images ne concernant que les fichiers du dossier membres. La distinction entre les fichiers du dossier « membres » et les fichiers à la racine étant devenue inutile, ces deux dossiers distincts n’ont plus lieu d’être. Il s’agit là aussi d’une petite faute de structure qui n’avait pas été correctement pensée, mais qui n’a que peu d’influence.

Le site, excepté dans le dossier des fichiers externes, ne contient pas particulièrement de fichiers (ces derniers ne se comptant pas par milliers). Une architecture extrêmement complexe n’avait donc pas besoin d’être étudiée (dossiers contenant des dizaines de sous-dossiers contenant des dizaines de dossiers, etc.) ce qui aurait été nécessaire dans le cas d’un site beaucoup plus conséquent.

 

4.3.2       Programmation modulaire

Le code a été, autant que possible, parcellisé quand cela était nécessaire.

 

Pour cette raison vous pourrez trouver dans la hiérarchisation du site certains fichiers tels que fonctions.php, haut.php, connexion_membre.php, login.php, barre_membre.php, etc.

Ces fichiers sont en fait intégrés directement dans d’autres fichiers grâce à la fonction include() de PHP.

En haut de chaque page du site, je fais appel à la fonction include() qui va insérer en haut de la page le fichier haut.php comme s’il faisait partie intégrante de la page, lequel va ouvrir les fichiers fonctions.php contenant les fonctions nécessaires à la bonne marche du site ainsi que connexion_membre.php qui créera les cookies et les variables de session, barre_membre.php qui contiendra le html affichant la barre de membres du haut de l’écran, etc.

 

Tous ces fichiers auraient pu être simplement rassemblés dans haut.php. La raison de cette division est la parcellisation du code, rendant la programmation plus modulaire.

Chaque fichier gère un module : le module de déconnexion, le module de connexion à la base de données, etc. ce qui permet d’effectuer facilement les modifications sur une chose en particulier sans devoir se retrouver dans un unique fichier comportant des milliers de lignes de code. C’est beaucoup plus clair et permet de traiter chaque partie séparément. De plus, dans certains cas, les mêmes modules auront besoin d’être appelés depuis plusieurs endroits différents du site. A ce moment-là, cela permet d’intégrer (voire de déplacer) facilement un module à un endroit précis du site.

 

La programmation est également modulaire grâce aux fonctions créées. Certaines actions sont plusieurs fois répétées sur le site, tel que calculer l’âge d’un membre en fonction d’une date de naissance, calculer le nombre de jours séparant deux dates, enlever tous les caractères spéciaux à une chaîne et transformer les espaces en traits d’union, etc.

Puisqu’aucune fonction intégrée par défaut à PHP ne permet les tâches énoncées au-dessus, il fallait donc les programmer. Afin d’éviter tant que possible le « copier-coller », j’ai donc placé un maximum de ces fonctions dans le fichier fonctions.php qui est appelé sur toutes les pages du site.

 

Le fichier connexion_membre.php, lui aussi intégré à toutes les pages du site, va créer une variable $membre et une variable $admin si la personne ayant chargé la page est un membre et/ou un administrateur, variable sous forme de tableau associatif contenant toutes les données du membre.

Ainsi, simplement en vérifiant la présence de la variable avec un simple isset($membre) on peut savoir si le membre est connecté, grâce à la variable $membre[‘pseudo’] on connait son pseudo, grâce à la variable $admin[‘AjouterCategorie’], on sait si l’administrateur a le droit d’ajouter des catégories, etc.

Cela permet donc de simplifier considérablement l’intégralité du code du site car on n’effectue qu’une seule requête MySQL par chargement allant directement chercher toutes les données du membre.

4.3.3       Indentation

Lors de la création de mes anciens sites, je ne m’étais que très peu soucié de l’indentation du code.

Pour petitsjobs.ch, je me suis assuré de correctement l’indenter sur toutes les pages.

 

En plus de l’indentation des différents blocs d’accolades, les sous-modules ont été espacés et les choses liées rapprochées afin qu’on se rende compte des relations logiques.

4.3.4       Commentaires

Le site devant pouvoir être repris par quelqu’un d’autre par la suite, j’ai donc essayé tant que possible de rendre la compréhension de ce dernier le plus simple possible :

-        Les différentes parties de chaque fichier ont été tant que possible commentées.

-        Lors de la création d’une nouvelle fonction, sa tâche et son utilisation a été détaillée.

-        Au début des fichiers dont l’utilité n’est pas explicite, des commentaires en détaillent la fonction.

4.3.5       Structure de la base de données

La base de données se devait d’être correctement structurée également.

Il s’agit de l’une des choses que j’ai faites en premier et, malheureusement, n’ayant jamais suivi de cours de gestion de bases de données, j’avais encore peu d’expérience dans le domaine.

 

J’avais donc très rapidement créé les premières tables : membres, annonces, administration, etc.

Malheureusement, je n’avais pas encore défini de règle concernant la façon de nommer les colonnes : j’ai donc appelé les champs id, pseudo, NomAnnonce, localite, etc. sans vraiment réfléchir à une méthode que j’allais respecter et suivre pour toutes les tables.

Comme me l’a fait remarquer M. Fragnière par la suite, mes tables aurait dues être pré (ou su) fixées.

Modifier le nom de dizaines de champs de plusieurs tables n’est malheureusement pas chose simple car cela implique de nombreuses modifications sur chaque fichier du site.

 

Certains champs ont donc été suffixés mais le but principal était de s’assurer qu’aucune colonne ne porte le nom d’une autre. C’est donc principalement le nom des champs « id » qui ont été modifiés afin d’éviter les confusions lors de requêtes joignant plusieurs tables.

 

Entre temps, j’ai créé d’autres sites utilisant également un système de bases de données. Les colonnes de ces dernières ont désormais toutes un suffixe simple (donc raccourci) et évident (ayant un rapport clair avec la table). Exemple : les champs de mes tables « membres » se nomment « m_id », « m_pseudo », « m_mail », etc.

Il est bien sûr trop tard pour appliquer cette logique à petitsjobs.ch, cependant c’est une expérience qui m’est désormais acquise. De plus, dans le cas où je créerais de nouvelles tables pour le site, cette structure sera reprise. Cela ne pose pas de problème particulier pour le développement du site mais aurait été informatiquement plus correct.

4.3.6       Gestion des relations

Avant de créer les tables, il fallait que leurs relations soient bien claires dans mon esprit. Effectivement, de nombreuses tables étaient liées à d’autres (par exemple, les annonces appartiennent à un membre, les localités sont liées au membre, les catégories sont liées aux annonces par l’intermédiaire d’une autre table, etc.).

Ayant bien réfléchi au projet et travaillant seul, je m’étais déjà mentalement représenté la structure de toutes les tables.

M. Fragnière m’a cependant fortement encouragé à représenter visuellement ces relations, j’ai donc créé, avant de me lancer plus loin dans le projet, un schéma de ces dernières dont vous pourrez trouver une copie dans les annexes.

 

Toutes les relations réellement existantes ont également été créées dans MySQL grâce à InnoDB (format particulier de certaines tables permettant une gestion plus précise des données, permettant notamment la gestion des relations). Ainsi, en détruisant un membre, cela détruit également en cascade toutes ses annonces et, par conséquent, toutes les catégories auxquelles ces annonces étaient liées. En détruisant une catégorie (par exemple « Baby-sitting »), cela détruira automatiquement toutes les lignes mettant en relation la catégorie avec les annonces qui y étaient liées.

PhpMyAdmin ne proposant pas de visualisation graphique des relations ainsi créées, il me fallait les reproduire manuellement sur papier.

4.4      Difficultés rencontrées

En créant ce site, de nombreuses difficultés d’ordre technique sont apparues. Je ne détaillerai pas tous les problèmes que j’ai rencontrés car ils se compteraient par centaines mais quelques-uns des principaux.

4.4.1       Hébergement du site

Petitsjobs.ch avait besoin d’être hébergé sur un serveur afin de pouvoir fonctionner.

Je disposais alors d’un hébergement de base à 25 euros (h.t.) chez OVH pour mon autre site qui fonctionnait parfaitement : il avait une bande passante illimitée, 25 go de stockage ce qui suffisait amplement ainsi qu’un bon système de gestion et d’une base de données de 25 mo (pas énorme mais représente déjà une très grande quantité de données). Il avait effectivement fait ses preuves et puisqu’il hébergeait un site avec un trafic mensuel de plus de 60 000 visiteurs qui téléchargeaient des millions d’images.

Cependant, il avait deux problèmes principaux :

-        Impossibilité de créer plusieurs comptes FTP

-        Impossibilité de créer plusieurs bases de données

Un compte FTP unique signifiait que, si par la suite plusieurs personnes devaient travailler sur le même site, je devais leur donner à tous le même mot de passe ce qui était moins fiable. De plus, grâce au multi-ftp, il est possible de ne donner accès pour certains comptes qu’à certains dossiers du site. Ainsi, une personne pourrait n’avoir accès qu’à un dossier personnel où il travaillerait sur ses propres fichiers de manière indépendante.

Une seule base de données aurait aussi pu suffire car sa taille était suffisante. Cependant, cela supposait de devoir mélanger les tables de petitsjobs.ch avec celles des autres sites, en les suffixant bien sûr. Il était donc possible de facilement les distinguer mais cela ne faisait pas très professionnel.

Du point de vue de la sécurité, l’avantage était clair :

-        Une personne travaillant sur un site ne peut accéder qu’aux tables de ce dernier.

-        Une faille éventuelle dans l’un des sites (du type injection SQL) ne permettrait pas de porter préjudice aux bases de données des autres.

Cela apportait de toute manière plus de sécurité grâce à un espace de 50 mo dans la base de données, cette fois-ci uniquement dédiés au site, un espace de stockage de 100 go en cas de besoin et la possibilité d’envoyer jusqu’à 1000 e-mails par jour grâce à la fonction mail() de php.

Cette offre supérieure ne coûtait de toute manière que 60 euros (h.t.) par année (en plus des noms de domaine) et n’était donc pas conséquente.

En cas de besoin par la suite, des offres d’hébergement mutualisé encore plus puissants sont disponibles pour 120 et 240 euros (h.t.) par année. Les serveurs dédiés, quant à eux, sont accessibles dès 600 euros (h.t.) par année, en restant bien sûr chez le même hébergeur qui propose des prix plutôt avantageux pour une bonne qualité et fiabilité.

A priori, un serveur dédié ne sera pas nécessaire même en cas de forte affluence, cependant il est possible que je me tourne vers un serveur dédié pour bases de données d’un coût supplémentaire de 72 euros (h.t.) par an au cas où le nombre de connexions simultanées aux bases de données deviendrait trop élevé (car sur les serveurs mutualisés leur maximum est de 10).

4.4.2       Planification des tâches

Pour les besoins du site, de nombreuses tâches devaient être effectuées automatiquement et régulièrement, chose que je n’avais jusqu’à présent jamais faite et je ne connaissais pas les technologies qui pouvaient permettre un système de ce type.

 

Pour cette raison, j’ai placé un fichier « operations_annonces.php » dans le dossier « membres » qui, à chaque fois qu’il est chargé, demandera au serveur d’effectuer de nombreuses vérifications et d’exécuter certaines actions en fonction des résultats.

Le fichier s’occupe donc de :

-        Supprimer les annonces dont la date d’expiration est passée et avertir le membre de cette action.

-        Envoyer un e-mail d’avertissement aux membres dont une annonce expirera dans moins d’une semaine.

-        Envoyer un e-mail d’avertissement aux membres dont une annonce expirera dans moins d’un mois.

-        Envoyer un e-mail aux membres qui fêtent leur anniversaire aujourd’hui.

-        Bloquer les comptes des membres âgés de plus de 23 ans (donc qui ont désormais dépassé la limite d’âge autorisée par le site) et les en avertir par e-mail.

-        Avertir les membres qui vont dépasser les 23 ans dans moins de 3 mois qu’ils ne pourront bientôt plus utiliser petitsjobs.ch.

Linux disposant d’un système de planifications de tâches et le serveur tournant sous Linux, il devrait théoriquement être possible de planifier l’exécution de ce fichier à intervalles régulières. Sinon, cela aurait signifié que j’aurais dû chaque jour m’occuper de charger la page ou faire que ce script se lance à chaque chargement de page d’un visiteur (ce qui aurait été structurellement mauvais et pourrait, si le site contenait plusieurs milliers d’annonces et de membres, ralentir énormément le temps de chargement des pages).

Généralement, ce système de tâches planifiées n’est utilisable qu’avec un serveur dédié. Par chance, OVH a récemment développé une interface permettant de facilement définir une liste de fichiers devant être exécutés à certaines heures de certains jours, disponible dans le manager fourni avec l’hébergement.

4.4.3       Librairies JavaScript

Le site dans son état actuel compte fortement sur l’aide des librairies JavaScript Mootools et jQuery.

En commençant ce projet, je n’avais même pas connaissance de l’existence de ces dernières. C’est en cherchant des informations que je suis tombé sur des articles parlant de ces dernières et que je me suis aperçu de leur potentiel.

Je me suis dans un premier temps tourné principalement vers Mootools.

Je cherchais à ce moment-là divers plugins (scripts open source pouvant facilement s’implanter afin d’ajouter de nouvelles fonctionnalités) pour mon site et, ayant trouvé ce que je cherchais, tournant sous Mootools, j’ai voulu n’utiliser que Mootools.

Leur site officiel paraissait en outre beaucoup plus clair et, après avoir lu l’avis de différents utilisateurs, Mootools semblait disposer de certains avantages nets sur jQuery.

 

Par la suite, je me suis rendu compte que jQuery était tout de même bien plus utilisé que Mootools, ce qui offrait donc une communauté de développeurs bien plus vaste et donc une aide beaucoup plus facile à obtenir en cas de problème ainsi qu’un bien plus grand nombre de plugins. En suivant quelques tutoriels, j’ai finalement trouvé l’utilisation de jQuery nettement plus aisée, ses fonctionnalités nombreuses et me suis donc définitivement dirigé vers cette voie. De plus, il semblerait que jQuery soit légèrement plus rapide que Mootools.

 

Actuellement, petitsjobs.ch utilise encore beaucoup Mootools car certains plugins n’ont pas de version équivalente en jQuery. Je souhaiterais par la suite me tourner exclusivement sur cette deuxième librairie mais cela demandera un long travail d’intégration.

 

Le problème principal de la double-utilisation de ces librairies était, au début, leur compatibilité. Les deux utilisant en effet le signe $ très couramment, il me fallait utiliser un mode de compatibilité puis remplacer dans le code de tous mes plugins le dollar par les caractères équivalents de compatibilité.

 

Au final, je maitrise désormais bien la librairie jQuery (ainsi que jQuery UI) et suis désormais capable de reprogrammer ou de personnaliser n’importe quel plugin. Ces connaissances m’ont déjà, depuis lors, été utiles pour la création d’autres sites internet et le seront pour l’intégration de nouvelles fonctionnalités à PetitsJobs.ch.

 

4.4.4       Ajax

Ajax, ou Asynchronous Javascript and XML, n’est pas un langage de programmation contrairement à ce que pensent certains.

Généralement, à chaque fois que le visiteur change de page, son navigateur demande au serveur ce qu’il doit afficher, le serveur répond et plus aucune connexion à internet n’est ensuite nécessaire jusqu’à ce que ce dernier ne charge une nouvelle page.

Grâce à Ajax, il est possible d’effectuer des actions de manière dynamique en se connectant au serveur sans devoir recharger le contenu de toute la page. Par exemple, sur la page de recherche d’annonces, les résultats qui s’affichent dépendent des critères choisis. En changeant un critère, il est nécessaire au site de se reconnecter à la base de données afin de chercher les annonces qui correspondent au nouveau critère entré. Sans l’utilisation d’Ajax, un système de recherche de ce type nécessiterait de devoir recharger l’intégralité de la page à chaque fois qu’un critère est modifié en transmettant les informations dans l’url ou à travers des variables de type POST, ce qui rendrait le temps de réponse énormément plus long !

En commençant ce projet, je n’étais absolument pas au courant de l’existence de telles possibilités ou du moins je pensais que cela était réellement très complexe.

En programmant le site, je me suis retrouvé assez rapidement à devoir programmer un système permettant d’afficher dans une liste déroulante toutes les localités correspondant au canton choisi par l’utilisateur. Cette liste devait être automatiquement modifiée sans rechargement de page lorsque l’utilisateur modifiait le canton choisi dans la liste déroulante.

Il y avait donc deux possibilités : charger toutes les données des 5000 localités de Suisse dans un fichier JavaScript (ce qui ne nécessitait donc pas de connexion internet mais risquait d’être compliqué à gérer et de ralentir le chargement) ou tout simplement utiliser Ajax pour se connecter à la base de données.

A ce moment-là, comme expliqué au-dessus, je ne savais encore pas du tout utiliser Ajax.

Après avoir passé de nombreuses heures sur différents forums, je parviens enfin à réaliser un code exécutant une page php distante lors de la modification du champ « canton » pour mettre à jour la liste « localités ».

Cependant, le code exécutant cette simple action est très volumineux et très compliqué (il fait plusieurs dizaines de lignes). J’ai ensuite, beaucoup plus tard, appris l’existence de la fonction jQuery.ajax() permettant d’obtenir le même résultat en une ligne seulement.

 

La découverte de cette simple fonction m’a donc permis d’enfin pouvoir créer des systèmes beaucoup plus complexes tel que la recherche avancée d’annonce.

 

Bien sûr, on aurait pu imaginer de créer l’intégralité de petitsjobs.ch de cette manière (on ne charge qu’une seule fois la page d’accueil et le contenu est ensuite modifié par ajax) afin d’optimiser de manière considérable le temps de chargement mais cela aurait été très mauvais pour deux raisons :

-         Les personnes extérieures souhaitant donner un lien vers une page ou une annonce précise devraient indiquer la page d’accueil du site, puis la marche à suivre pour arriver sur la page voulue.

-         Les moteurs de recherche ne lisant pas (ou presque) le JavaScript, il serait tout à fait incapable de référencer le site excepté sa page d’accueil.

4.4.5       Ajout des localités dans la BDD

Lorsqu’il m’a fallu créer une table contenant toutes les localités suisses, la question était de savoir comment s’y prendre obtenir les données et les convertir en code SQL.

Après un certain temps de recherche, je suis parvenu à trouver un fichier .txt sur le site officiel de la poste contenant une liste de localités avec, pour chacune, le canton auquel elle correspond.

Bien évidemment, le traitement d’un fichier texte étant tout sauf aisé, je suis passé par Excel, lequel a réussi à reconvertir ce fichier de manière plus ou moins correcte en tableau. Après avoir éliminé au mieux les données inutiles, j’ai pu enregistrer ce fichier et l’importer dans PhpMyAdmin, lequel étant apte à lire ce type de données et les convertir en tables.

4.4.6       API Facebook, Twitter et Google Map

Lors de chaque annonce créée, un message est posté sur les comptes Facebook et Twitter de PetitsJobs.ch

La position de l’annonceur est affichée en bas de chaque annonce dont le propriétaire a indiqué son adresse.

N’ayant jamais utilisé les API de ces sites, il m’a également fallu plusieurs dizaines d’heures pour me renseigner sur leurs possibilités et leur fonctionnement.

La documentation étant à chaque fois en anglais et peu simplifiée, trouver les informations utiles n’est pas chose aisée. De plus, dans le cas de Google Map, l’API étant passée relativement récemment de la version 2 à la version 3, tout son fonctionnement en a été modifié et les tutoriels non officiels n’étaient pas toujours à jour.

Finalement, je suis parvenu à faire fonctionner ces systèmes qui sont désormais actifs sur petitsjobs.ch.

Dans le cas de Twitter et de Facebook, je suis passé par l’intermédiaire d’un script open source facilitant l’ajout de telles fonctionnalités.

4.4.7       Compatibilité Internet Explorer

Internet Explorer est connu pour poser des problèmes à presque tous les développeurs Web. Effectivement, beaucoup des comportements ordinaires du HTML, CSS et JavaScript sont interprétés différemment sur ce navigateur, ou ne sont tout simplement pas utilisables !

En dehors de certains bugs graphiques mineurs causés par la version 8 (voire même la version 9 suivant lesquels), les requêtes Ajax programmées en jQuery ne fonctionnaient pas du tout sur les versions d’internet explorer 8 ou moins. Il m’a donc fallu reprogrammer entièrement l’interface de recherche d’annonce afin d’afficher une page différente aux utilisateurs d’internet explorer 8 (qui représentent environ 15% des visiteurs) afin de ne pas avoir à utiliser cette technologie.

Malgré de nombreux efforts de compatibilité, il semblerait que l’affichage sur les versions 7 ou inférieur soit encore fortement détérioré. Cette version ne se trouve pourtant plus en téléchargement depuis de nombreuses années mais une très faible quantité de personnes l’utilise. Malheureusement, n’ayant pas réussi cette fois-ci à créer une version de compatibilité, il m’a fallu afficher un message d’avertissement sous forme d’alerte JavaScript aux utilisateurs de ce système.

En dehors des anciennes versions du logiciel de Microsoft, le site fonctionne parfaitement bien sur tous les navigateurs (testé sous Firefox 3.6 et supérieur, Safari, Google Chrome 10 et supérieur, Opera, Internet Explorer 7, 8 et 9, Android, Firefox sur Android, Safari sur IPhone).

5        Création du design

Le design d’un site internet est l’une des choses les plus importantes lorsqu’il s’agit de le faire connaitre. Un site internet graphiquement attrayant aura un taux de retour bien plus élevé qu’un site internet avec un design ordinaire.

Le design du site était donc un point important du développement de ce site.

Au début, je n’avais pas l’intention de m’occuper moi-même de cet aspect de la conception du site et pensais trouver une personne pouvant s’occuper de cette partie. Après avoir cherché en vain, je me suis aperçu que cela serait trop difficile et que mes besoins étaient immédiats. Le site devait être mis en ligne assez rapidement et je ne pouvais pas me permettre de prendre du retard dans le cas où je ne parviendrais pas trouver quelqu’un pour s’occuper de cette tâche.

J’ai donc entrepris de le créer par moi-même mais je n’avais alors encore jamais conçu de design. Cette partie a donc été extrêmement difficile pour moi car je ne savais vraiment pas comment m’y prendre.

Différent choix devaient être pris concernant la conception de ce design et les principaux seront détaillés ci-dessous.

5.1      Couleurs principales

Avant la création d’un design, il est important de définir le sentiment qu’il devra faire ressentir aux utilisateurs. En fonction de cela, les couleurs et formes varieront.

Le design se voulait plutôt sérieux et clair. Il me fallait donc des couleurs ne gênant pas l’œil et étant plutôt rassurantes, donnant une impression de calme. Le bleu me semblait donc adapté et est un choix plutôt classique qui s’adapte à beaucoup de situations. Viennent ensuite le gris et le blanc qui sont deux couleurs très sobres et qui s’associent assez bien au bleu. Le blanc est surtout une couleur permettant de contenir du texte en noir très lisiblement.

Les différents éléments du site ont donc été pour la plupart déclinés en plusieurs bleus différents. On peut par exemple constater le menu du haut coloré de 4 bleus différents, de plus en plus clairs.

5.2      Design Extensible

Il existe deux types de design : ceux extensibles et ceux à taille fixe.

Les designs fixes sont les plus courants mais surtout les plus simples à concevoir. La largeur du corps du site est indépendante de la résolution de l’écran de l’utilisateur. Généralement, cela induit donc une grande partie de l’écran qui n’est pas utilisée et est remplie par une très grande marge.

Cela facilite grandement la création car on sait que peu importe la taille de l’écran ou de la fenêtre de l’utilisateur, tous les éléments du site s’afficheront au même endroit.

Le deuxième type de design est moins courant mais utilisera toute la surface de l’écran pour afficher le site. On peut trouver des designs de ce type sur les sites tels que Facebook, Gmail, Google, etc. mais aussi sur des sites bien plus petits bien sûr.

PetitsJobs.ch fait donc partie de cette catégorie. Vous pourrez constater en redimensionnant votre fenêtre que le site s’adapte automatiquement.

Afin de ne pas donner l’impression d’un site prenant tout l’espace et permettre au site de « respirer », il dispose tout de même de marges en haut, à gauche et à droite (fond bleu dégradé).

5.3      Organisation des menus

Il fallait également définir la disposition des différents menus du site.

Le site n’ayant que très peu de pages, il aurait été inutile de créer de multiples menus. Les différents « menus » du site ont déjà été présentés plus haut et ils ne seront donc que brièvement détaillés ici.

Le site comprend donc 4 « menus » si on compte le pied de page qui permet d’accéder aux pages secondaires de faible importance.

Le pied de page est collé au bas de la page, est donc lié au corps principal et n’a pas de marge inférieure ce qui donne une impression de prolongement (le visiteur a le sentiment de pouvoir encore descendre plus bas dans la page).

La barre de membres du haut se déplie lorsque le curseur le survol afin de permettre la connexion des utilisateurs. Lorsqu’elle est dépliée, elle décale le contenu de tout le reste de la page afin de ne pas en gêner la navigation. Les couleurs de cette interface sont le bleu et le gris, correspondant aux couleurs du site.

Les boutons du menu animé du haut contiennent le titre des pages vers lesquelles ils envoient ainsi qu’une description de leur utilité et un icône en rapport.

Les boutons sont tous colorés en bleus de plus en plus clairs, de gauche à droite et les icônes choisis correspondent également aux couleurs du site.

Le menu de gauche ne contient aucun lien (excepté le rappel des étapes pour les membres connectés, boutons bleus également) et sert principalement à l’affichage du bandeau publicitaire et du bloc Facebook et Twitter. De plus, il pourra par la suite permettre l’ajout de nouvelles fonctionnalités dans cette zone. L’absence de ce menu aurait été plutôt étrange car les utilisateurs sont très habitués à voir une zone distincte à droite ou à gauche.

5.4      Description : http://programmershotel.com/wp-content/uploads/2009/11/css3-380x285.jpgCSS 3

Beaucoup d’éléments du site utilisent le CSS 3, principalement pour les angles arrondis et les ombres.

La propriété Border-radius est utilisée sur tous les <fieldset> (utilisés très fréquemment pour contenir des éléments sur petitsjobs.ch), sur les coins supérieurs du site, sur les <input>, <select> et autres éléments de formulaire (ce qui leur donne un effet particulier appréciable) ainsi que sur de nombreuses images. Cette propriété est fonctionnelle sur tous les navigateurs excepté internet explorer 8 et inférieur et la version 9 n’en offre qu’une compatibilité réduite (le border-radius ne fonctionne pas correctement sur tous les types d’éléments).

La propriété box-shadow permettant de créer des ombres sur des éléments est utilisée sur de nombreuses images, sur les <input> et autres éléments de formulaire ainsi que sur le corps principal du site. Cette dernière est complétement compatible avec tous les navigateurs excepté Internet Explorer 8 et inférieur.

Il aurait été possible de reprogrammer pour Internet Explorer 8 ces fonctions en JavaScript, ce qui a été tenté, mais le résultat obtenu n’était pas toujours satisfaisant.

Seules des propriétés CSS 3 ne provoquant pas de problème majeur en cas de non-compatibilité ont été utilisées. Si un navigateur ne les supporte pas, cela n’empêchera pas le visiteur de profiter pleinement de toutes les fonctionnalités du site.

5.5      Ressources graphiques

Les nombreuses ressources graphiques (images, logo, dégradés, icones) ont été créées grâce à Gimp, le logiciel open source de traitement d’images. Excepté le cas de la plupart des icônes du site qui proviennent de banques d’images libres de droit, j’ai dû créer les éléments graphiques par moi-même (tel que les deux boutons de la page d’accueil, le logo, les boutons des menus, etc.).

6        Mise en service du site

6.1      Technique

D’un point de vue technique, la mise en ligne du site et donc son ouverture n’a pas posé de problèmes particuliers. La conception du site s’est faite durant tout le projet directement en ligne et les fichiers étaient donc déjà présents sur le serveur.

Presque tous les bugs avaient déjà été corrigés et le site devait donc ouvrir directement avec sa version définitive. Suite aux quelques propositions reçues entre temps et aux quelques idées que j’ai eues, le site a un peu été modifié mais est globalement resté fidèle à sa version originale.

6.2      Promotion

Pour qu’un site de ce type fonctionne, il lui faut avoir immédiatement un grand nombre de visiteurs. Effectivement, le site ne peut pas fonctionner s’il n’y a pas des étudiants et des annonceurs (deux types de clients bien distincts, ce qui est déjà une double-condition par rapport aux sites ordinaires), les employeurs n’iront pas contacter les annonceurs s’il n’y a pas suffisamment d’annonces (car ne trouveront jamais d’étudiants correspondant à leurs besoins) et les annonceurs risquent de ne pas mettre d’annonces s’ils ont l’impression que le site n’est pas connu et qu’ils en sont presque les seuls utilisateurs.

Le but était donc d’avoir très rapidement (en moins d’une semaine) une bonne quantité d’annonces pour ensuite pouvoir commencer à promouvoir le site auprès des employeurs. La deuxième étape devait aussi être plutôt rapide pour éviter que les étudiants ne retirent leurs annonces en voyant l’absence de retour.

6.2.1       Facebook

La première étape était donc d’informer les étudiants de la région pouvant être intéressés à poser une annonce sur le site. Facebook était donc l’outil le plus approprié pour avoir un retour rapide auprès des jeunes.

J’ai donc, dès le jour de l’ouverture, créé un événement Facebook auquel j’ai invité mes contacts en invitant les gens à s’inscrire, et surtout à inviter leurs propres amis à y participer également. Malgré que je n’avais que 130 « amis » sur Facebook (ce qui n’est pas extrêmement élevé), l’événement a finalement compté plus de 1 000 invités qui ont dans de nombreux cas publié une annonce ou parlé du site à d’autres de leurs amis.

Facebook est donc un moyen de communication extrêmement important au niveau du marketing à ne pas négliger. Ayant été longtemps un non-utilisateur de Facebook et utilisant encore maintenant cette plateforme relativement peu par rapport à certaines personnes, je me suis rendu compte qu’avoir une « liste d’amis » bien fournie est un atout marketing majeur.

6.2.2       Mailing

Dans le même esprit que Facebook, un mailing invitant les gens à visiter le site et à transmettre l’information à leurs connaissances a été effectué mais concernant cette fois-ci tant les étudiants que les employeurs. Ici aussi, le retour a été assez bon puisque de nombreuses personnes ont répondu par un message positif en ajoutant qu’ils avaient transmis le message à leurs contacts.

A la différence de Facebook, il est difficile d’évaluer le résultat concret de l’opération car :

-        Il est impossible de voir le nombre de personnes ayant reçu le mail au final (contrairement à l’affichage du nombre d’invités dans Facebook)

-        Il est impossible de voir le nombre de personnes qui sont allées visiter le site grâce au mailing (dans le cas de Facebook, ces chiffres peuvent être consultés par le biais de Google Analytics ou de la variable $_SERVER[‘HTTP_REFERER’] indiquant l’url de la page d’où provient le visiteur [en l’occurrence, l’événement Facebook])

6.2.3       Circulaire au Gymnase de Burier

Description : http://www.24heures.ch/files/imagecache/468x312/story/22_3.jpgLa deuxième chose à faire était d’effectuer une promotion interne au Gymnase de Burier informant les élèves de l’existence du site.

J’ai donc contacté Monsieur Michael Gelsomino, doyen responsable des Travaux de Maturité, afin d’obtenir son autorisation pour distribuer une circulaire dans toutes les classes. Vous trouverez une copie de cette circulaire en tant que premier annexe à la fin de ce dossier.

6.2.4       Contact des directeurs de gymnases

La création d’annonces concernant exactement la tranche d’âge de tous les gymnasiens, il me fallait essayer de promouvoir ce site auprès des autres gymnases de Suisse romande. J’ai donc envoyé un e-mail aux directeurs des 36 gymnases de Suisse romande, dont vous pouvez trouver le contenu ci-dessous :

« Monsieur le directeur,

 

Je suis étudiant au gymnase de Burier, à la Tour-de-Peilz et j'ai créé, dans le contexte de mon travail de maturité, un site internet d'aide à la recherche de petits jobs pour les jeunes : www.petitsjobs.ch. Celui-ci est désormais terminé et a été mis en ligne tout récemment (le 26 août). Par conséquent, je suis actuellement en phase de promotion, raison pour laquelle je vous écris.

 

Le site est destiné aux étudiants romands entre 14 et 23 ans qui veulent offrir un service rémunéré aux personnes de leur région. En s'inscrivant gratuitement ces étudiants peuvent ensuite remplir leur CV puis créer une annonce en choisissant les catégories dans lesquelles ils proposent de travailler.

L'annonce créée est directement visible et les futurs "employeurs" peuvent ainsi facilement trouver un étudiant dans le domaine voulu, près de chez eux en cliquant simplement sur la catégorie concernée : la liste des annonces correspondant à la région choisie et aux critères définis s'affiche immédiatement.

 

Le site s'adressant à tous les étudiants romands et je souhaite le promouvoir auprès des gymnases. Vous serait-il possible de m'aider dans ce sens: pourriez-vous au mieux distribuer la lettre que vous trouverez ci-joint dans les classes et/ou au moins  l'afficher sur les panneaux d'affichage ?

 

Je reste à votre disposition pour tout renseignement complémentaire et vous remercie d'avance pour votre précieuse collaboration.

 

Avec mes biens sincères salutations,

 

 

Jonathan Zimmermann »

 

Vous pouvez trouver en annexe 1 la circulaire qui avait été jointe à cet e-mail (qui est la même que celle utilisée pour le Gymnase de Burier).

Les réponses reçues ont été extrêmement variables selon les cas. Il n’y a parfois pas eu de réponse du tout ou parfois un refus total. Certains ont accepté d’afficher le document sur leurs panneaux d’affichage, d’autres d’en informer les parents contactant leur secrétariat et cherchant un répétiteur. D’autres encore ont distribué la circulaire dans les classes.

Je souhaiterais mentionner le cas particulier du Gymnase Intercantonal de la Broye dont le directeur, Monsieur Thierry Maire, ayant trouvé le projet intéressant, a souhaité le soutenir tout particulièrement. Il m’a en effet proposé de venir y donner une conférence de 2 périodes aux deux classes d’informatique dont le gymnase comporte ainsi qu’éventuellement un partenariat avec ces dernières pour la suite du développement du site et/ou avec l’école de commerce pour la démarche marketing du site. Au moment de l’écriture de ces lignes, les modalités n’ont pas encore été définies mais je devrais me rendre sur place au courant du mois de novembre.

6.2.5       Contact des directeurs d’écoles primaires et secondaires

Un deuxième e-mail, différent, a été envoyé plus tard, dès lors que le site comprenait déjà un certain nombre d’annonces, aux directeurs des 88 établissements primaires et secondaires vaudois. Le contenu de cet e-mail était le suivant :

« Monsieur le directeur,

 

Je suis étudiant au gymnase de Burier, à la Tour-de-Peilz et j'ai créé, dans le contexte de mon travail de maturité, un site internet d'aide à la recherche de petits jobs pour les jeunes de 14 à 23 ans : www.petitsjobs.ch.

 

J'ai lancé tout dernièrement une campagne de promotion du site auprès des étudiants romands. Après les deux premières semaines de sa mise en ligne, il  compte déjà plus de 400 membres et environ 120 annonces !

 

Aujourd'hui, les personnes cherchant l'aide d'un étudiant peuvent facilement en trouver un près de chez eux et correspondant à leurs besoins grâce à ce site. Aussi, je souhaite actuellement le promouvoir davantage aux éventuels "employeurs" susceptibles d'être intéressés, raison pour laquelle je vous écris.

 

Dans l'idée que les parents des élèves de votre établissement pourraient rechercher  l'aide d'étudiants pour donner des cours à leurs enfants ou pour tout autre service, la distribution d'une circulaire les informant de l'existence de ce site serait la bienvenue. Aussi, je me suis permis d'en joindre une à ce présent courrier que, bien évidemment, vous êtes libre ou non d'utiliser à cet effet.

 

Comme vous l'aurez compris, plus vous distribuerez l'information sur l'existence de ce site d'une manière ou d'une autre, plus il aura de chances de fonctionner et de rendre services aux adultes employeurs et à des étudiants.

 

En vous remerciant d'avoir pris le temps de lire ce mail, tout en restant à votre disposition pour des renseignements complémentaires, je vous prie de recevoir, Monsieur le directeur, mes salutations distinguées.

 

Jonathan Zimmermann »

 

L’obtention des adresses e-mail de contact n’a pas été simple et a pris un certain temps. Vous pourrez trouver en annexe 2 la circulaire jointe à cet envoi.

Le nombre d’annonces dans les autres cantons étant encore plus limité, je ne me suis adressé dans un premier temps qu’aux écoles vaudoises.

Ici aussi, les réponses auront été très variables selon les cas.

6.2.6       Contacts des médias

Il me fallait ensuite, bien sûr, essayer de contacter les médias afin qu’ils parlent de PetitsJobs.ch.

J’ai donc envoyé dans un premier temps le message suivant aux principaux journaux et hebdomadaires de la région :

« Madame, Monsieur,

 

Je suis étudiant au gymnase de Burier, à la Tour-de-Peilz et j'ai créé, dans le contexte de mon travail de maturité, un site internet d'aide à la recherche de petits jobs pour les jeunes : www.petitsjobs.ch. Celui-ci est désormais terminé et a été mis en ligne tout récemment (le 26 août).

 

Le site est destiné aux étudiants romands entre 14 et 23 ans qui veulent offrir un service rémunéré aux personnes de leur région. En s'inscrivant gratuitement ces étudiants peuvent ensuite remplir leur CV puis créer une annonce en choisissant les catégories dans lesquelles ils proposent de travailler.

L'annonce créée est directement visible et les futurs "employeurs" peuvent ainsi facilement trouver un étudiant dans le domaine voulu, près de chez eux en cliquant simplement sur la catégorie concernée : la liste des annonces correspondant à la région choisie et aux critères définis s'affiche immédiatement.

 

Le site a connu dès son lancement une forte croissance. En quelques jours à peine, il compte déjà 276 membres qui ont posté 77 annonces, venant d'un peu toute la Suisse romande et offrant des services dans tous types de catégories ! Ces chiffres sont très prometteurs.

Le site est donc désormais tout à fait utilisable par toute personne cherchant l'aide d'un étudiant proche de chez lui : vous pouvez facilement trouver un profil correspondant à vos attentes depuis cette page : 

http://www.petitsjobs.ch/membres/recherche_simple.php

 

Actuellement, il n'existe aucun site offrant des services comparables en Suisse. PetitsJobs.ch permet surtout une extrême simplicité pour les "employeurs" souhaitant pouvoir rapidement contacter une personne qualifiée. Plus besoin pour eux de mettre une annonce, une liste leur est gratuitement offerte !

 

Aussi je vous écris pour savoir si vous pourriez parler de ce site dans un article et si possible dans la prochaine édition de votre journal. Ce faisant vous contribuerez à son expansion : plus il sera connu plus il aura de chances de fonctionner !

 

Je reste à votre disposition pour tout renseignement complémentaire et très volontiers pour vous rencontrer si vous le souhaitez.

 

En vous remerciant d'avance pour votre précieuse collaboration, recevez, Madame, Monsieur, mes bien sincères salutations.

 

Jonathan Zimmermann »

 

Le retour de ce côté-là n’a malheureusement pas été très élevé. Je compte cependant les relancer par la suite en fonction de l’évolution du site et contacter les radios locales.

 

Description : http://www.bonasavoir.ch/picture/interface/logo.gifAu moment de l’écriture de ces lignes, je peux déjà noter la présence d’un article dans le « 24 heures » ainsi que dans les versions onlines du « Bon à savoir » et du « Tout compte fait ».

Je suis également en attente d’un contact de la part du rédacteur en chef du 20 minutes qui est une de mes connaissances.

 

6.2.7       Contact des communes

J’ai également contacté par e-mail les 340 administrations communales vaudoises. Ces dernières n’ayant aucun but lucratif, ayant pour but de rendre service à la population, pouvant toucher un panel varié de personnes et ayant des possibilités assez diversifiées étaient donc des acteurs évidents.

Voici donc le mail qui leur a été envoyé :
«Madame, Monsieur,

 

Je suis étudiant au gymnase de Burier, à la Tour-de-Peilz et j'ai créé, dans le contexte de mon travail de maturité, un site internet d'aide à la recherche de petits jobs pour les jeunes de 14 à 23 ans : www.petitsjobs.ch.

 

J'ai lancé tout dernièrement une campagne de promotion du site auprès des étudiants romands. Après le premier mois de sa mise en ligne, il  compte déjà plus de 500 membres et environ 170 annonces actives !

 

Aujourd'hui, les personnes cherchant l'aide d'un étudiant peuvent facilement en trouver un près de chez eux et correspondant à leurs besoins grâce à ce site. Aussi, je souhaite actuellement le promouvoir davantage aux éventuels "employeurs" susceptibles d'être intéressés, raison pour laquelle je vous écris.

 

Dans l'idée que de nombreux habitants de votre commune pourraient rechercher  l'aide d'étudiants pour, par exemple, donner des cours à leurs enfants, tondre leur gazon, les aider dans certaines tâches ménagères ou pour tout autre service (comme une aide aux personnes âgées), l'affichage d'une circulaire les informant de l'existence de ce site serait la bienvenue. Aussi, je me suis permis d'en joindre une à ce présent courrier que, bien évidemment, vous êtes libre ou non d'utiliser à cet effet.

Cependant, si vous souhaitez également promouvoir ce site auprès des jeunes, vous trouverez ci-joint une deuxième circulaire étant cette fois-ci destinée aux étudiants.

 

Comme vous l'aurez compris, plus vous distribuerez l'information sur l'existence de ce site d'une manière ou d'une autre, plus il aura de chances de fonctionner et de rendre services aux adultes employeurs et à des étudiants de votre commune et du reste de la Suisse.

 

En vous remerciant d'avoir pris le temps de lire ce mail, tout en restant à votre disposition pour des renseignements complémentaires, je vous prie de recevoir, Madame, Monsieur, mes salutations distinguées.

 

Jonathan Zimmermann »

 

Les réponses de ce côté-là ont globalement été plus positives. Certaines ont accepté d’afficher les circulaires sur leurs différents panneaux d’affichage et certaines ont même ajouté un lien sur leur site. Malheureusement, la quantité de réponse est resté quand même très faible par rapport au nombre d’envois.

Dans les jours à venir, je souhaite également m’adresser aux communes des cantons du Valais, de Fribourg, Genève et Neuchâtel.

6.2.8       Google AdWords

Un budget publicitaire de 110 CHF a également été dépensé sur le réseau de diffusion Google AdWords.

Google AdWords est la régie publicitaire de Google, côté annonceur. Il permet de diffuser la publicité pour un site directement sur le moteur de recherche Google ainsi que sur les centaines de milliers de sites utilisant Google AdSense (qui est la régie publicitaire de Google côté éditeur, également utilisée sur petitsjobs.ch mais cette fois-ci pour générer des revenus).

Le principe est que l’annonceur choisit une vingtaine de mots-clefs, puis, sur cette base, Google AdWords en propose des centaines étant similaires à ceux déjà choisis ainsi que ceux qui semblent correspondre à votre site. Ensuite, on définit certains critères (le pays et la région ciblée, la tranche d’âge, etc.) ainsi qu’un prix maximum que l’on est prêt à mettre pour chaque clic sur notre pub (qui est en fait un lien vers notre site).

A chaque fois qu’un mot-clef est recherché sur Google ou que ce mot-clef apparait sur une page disposant de Google AdSense, chaque emplacement publicitaire est mis aux enchères, en concurrence avec tous les autres annonceurs qui ciblent ce mot-clef. L’affichage est ensuite donné à celui qui offre le plus gros montant par clic.

Ces explications, bien qu’extrêmement simplifiées, permettent de bien comprendre le fonctionnement de Google AdWords. Il s’agit donc d’une régie publicitaire qui ne facture qu’au résultat (le service est entièrement gratuit si personne ne clique sur vos publicités) et qui permet surtout un ciblage extrêmement précis ! Dans le cas de petitsjobs.ch, il était donc pratique de pouvoir s’adresser uniquement à la population Suisse étant déjà intéressée par la recherche de petits boulots.

6.2.9       Divers

Diverses autres actions à but promotionnel ont été bien sûr effectuées. J’ai contacté les webmasters de certains sites pouvant mettre un lien vers petitsjobs.ch sur le leur et je suis encore en attente de certaines réponses. Le site de la ville de Vevey, notamment, comporte déjà un lien vers ce dernier.

Il me faut encore également placer des circulaires dans les différents emplacements de la région, tel que les supermarchés et les petits commerces.

 

 

6.3      Statistiques

Nous allons maintenant nous intéresser aux statistiques du trafic du site qui a résulté de toutes ces démarches publicitaires.

Toutes les statistiques qui suivront ont été tirées du système d’analyse Google Analytics : http://www.google.com/analytics/

Voici donc un graphique représentant l’évolution du nombre de visites journalières au cours du temps, du 18 août au 18 octobre 2011.

Si nous étudions un peu ces chiffres, on peut constater un trafic résiduel avant la première campagne de promotion du site, surtout dû à des tests préliminaires.

Le jour du lancement officiel, le 26 août, on peut immédiatement voir un premier pic de 202 visites. Il est presque exclusivement dû à l’évènement Facebook créé ce jour-ci.

Les 5 jours suivants, le trafic est resté plutôt stable et a même atteint un pic maximum de 239 visites le 31 août. Tout ceci est dû cette fois-ci à Facebook encore dont l’évènement a eu une forte fréquentation la première semaine mais aussi aux diverses campagnes tel que la circulaire au gymnase de Burier.

A partir du premier octobre, on voit clairement que la fréquentation baisse radicalement et diminue peu à peu de jour en jour en ayant de temps en temps des mini-pics. Ces mini-pics sont à chaque fois dus à une autre campagne promotionnelle effectuée. Durant les trois premières semaines environ, on constate tout de même un trafic assez artificiellement augmenté par Google AdWords.

Le pic indiqué par la 3ème fléche sur l’image précédente (de 104 visites), par exemple, est dû aux contact de tous les directeurs des écoles secondaires et primaires vaudoises le 20 septembre.

Le pic indiqué par la 4ème fléche sur l’image précédente (de 94 visites), par exemple, est dû au mailing effectué ce jour-ci (le 5 octobre). Cette fois-ci, on constate que l’effet de cette action s’est répercuté sur plusieurs jours.

Le dernier pic marqué, le 17 octobre, de 88 visites, est dû au contact des communes.

Maintenir un trafic élevé est donc extrêmement compliqué : malgré les multiples campagnes effectuées, je ne suis parvenu qu’à me stabiliser aux alentours de 35 visites (par opposition aux visiteurs) par jour, qui ne restent pour la plupart que peu de temps sur le site.

Au niveau des statistiques sur les recherches Google, on peut bien sûr trouver facilement petitsjobs.ch en indiquant le nom du site ou des termes similaires mais également, de plus en plus, par des mots-clefs très particuliers se trouvant dans certaines annonces. En regardant les statistiques, on peut par exemple voir que des gens sont arrivés sur le site en tapant « cours particuliers d'allemand au valais », « n'importe quels petits boulots », « job 15 ans », « répétiteurs blonay st-légier », etc. ce qui est plutôt bon signe car indique un référencement propre de chacune des annonces sur le site. Il est bien connu que Google aime particulièrement bien les sites plutôt âgés donc ces résultats devraient encore monter par la suite.

Au final, les statistiques sont tout de même bien moins bonnes que ce qui était attendu mais devraient tout de même permettre au site de continuer de tourner par la suite.

7        Protection des mineurs

Un site de ce type peut poser des problèmes quant à la sécurité des données et la protection des mineurs.

En effet, n’importe qui peut créer une annonce en se faisant passer pour quelqu’un qu’il n’est pas. De même, tout un chacun peut consulter l’intégralité des annonces disponibles sur le site sans devoir annoncer son identité et peut consulter les données personnelles de tout étudiant puis les contacter en se faisant passer pour un employeur mais en ayant d’autres intentions.

Bien sûr, il s’agit d’un problème récurrent qu’on retrouve partout et qui a toujours été d’actualité. Ces dernières années, Facebook, notamment, mais surtout car il s’agit du site le plus fréquenté a été un sujet de polémique : Faut-il autoriser les mineurs à utiliser Facebook et les laisser y révéler de nombreuses informations personnelles ? Faut-il contrôler l’identité de chaque personne s’inscrivant sur un site de ce type ? Voilà donc des questions courantes mais dont la réponse ne laisse malheureusement que peu de choix.

J’ai moi aussi réfléchi à ces problèmes lors de l’élaboration du site et suis arrivé à plusieurs réflexions.

Les annonces doivent-elles être accessibles publiquement par tous ? Oui, outre que cela permette une bien plus grande facilité d’accès et un référencement par les moteurs de recherche, il s’agit de la seule possibilité viable.

Une alternative aurait été de demander aux personnes souhaitant consulter ces annonces de s’inscrire en tant qu’employeur. Malheureusement, une personne malveillante pourra toujours s’inscrire avec de fausses informations depuis une adresse IP ne lui appartenant pas et aurait pour seule conséquence de compliquer la tâche aux employeurs potentiels. Afin de mieux garantir l’identité d’un employeur s’inscrivant, on aurait également pu mettre en place un système demandant une validation du compte par e-mail (le propriétaire d’une adresse e-mail pouvant généralement être retrouvé par les services de police) mais cela n’offre pas non plus une fiabilité totale (il existe des services d’e-mails anonymes) et, en cas de problème, puisque la totalité des personnes inscrites ont accès aux mêmes informations (numéros de téléphone, éventuelles adresses et noms), il serait également impossible de déterminer qui les aurait utilisées à mauvais escient.

Une ultime possibilité de sécurité aurait été de ne rendre possible le contact auprès des annonceurs que par l’intermédiaire de messages privés sur le site mais cela aurait sûrement rendu le site complétement superfétatoire, les démarches par messages privés ou par e-mails étant beaucoup trop lentes et compliquées pour certains besoins. De plus, même cela n’aurait pas permis une transparence totale et il aurait fallu un envoi postal pour garantir totalement l’identité des membres.

Afin de se prémunir partiellement de certains risques, il est mentionné lors de l’inscription que le site est réservé aux personnes majeures, ou mineures si la personne dispose de l’accord de son responsable légal.

Lors de la rédaction du CV, il est clairement mentionné à de nombreuses reprises qu’aucun des champs n’est obligatoire. Les champs tels que l’adresse ou le numéro de téléphone fixe dispose également d’une information supplémentaire rappelant qu’ils ne sont pas nécessaires mais que les remplir permet à n’importe qui de retrouver facilement l’auteur de l’annonce. Effectivement, si une personne indique son adresse ainsi que son nom, c’est de sa propre initiative qu’elle le fait puisque ces champs ne sont nullement requis pour la création d’une annonce sur petitsjobs.ch : il s’agit juste d’un service offert à ceux qui le désirent.

Lors de l’inscription, le site demande d’entrer sa date de naissance. Si l’étudiant n’a pas entre 14 et 23 ans, son inscription est refusée par le site : cela filtre déjà les mineurs de 13 ans ou moins.

Bien sûr, le site s’engage également  à supprimer immédiatement toute annonce abusive qui n’aurait pas lieu d’être sur petitsjobs.ch ainsi qu’éventuellement le compte de son propriétaire. Les annonces ne sont pas contrôlées manuellement avant validation mais des contrôles réguliers sont effectués.

Avant de conclure ce chapitre, en admettant bien sûr que certains risques peuvent exister mais que tout le possible a été fait pour éviter ces ennuis, je souhaite rappeler que ce type de problème existait déjà bien avant que des services de ce genre ne soient disponibles par internet. En effet, avant de passer par le web, les étudiants plaçaient des petites annonces dans les commerces de proximité, dans les journaux, etc. Dans ces dernières, ils indiquaient aussi leur numéro de téléphone ou tout autre moyen de contact ainsi que, parfois, leur photo. Ces informations étaient donc déjà publiques bien que moins faciles d’accès mais il serait faux de penser qu’internet a été le déclencheur de ce type de problèmes. Au sein même de la toile, petitsjobs.ch n’est pas un cas particulier : de très nombreux sites peuvent permettre d’obtenir des informations sur des mineurs : le problème ne vient pas des sites mais des gens les fréquentant.

 

 

 

Conclusion

PetitsJobs.ch a donc été un travail de longue haleine qui a encore de longs jours devant lui ! Des nouvelles fonctionnalités pourront être intégrées en fonction de son évolution et sa phase marketing n’est de loin pas terminée.

Ce projet m’aura permis d’étudier tous les aspects principaux de la conception d’un site internet jusqu’à sa mise en ligne et sa promotion ainsi que d’apprendre de nouveaux outils de programmation et d’améliorer grandement ma maitrise de ceux que je connaissais déjà.

Grâce à ce travail, je suis maintenant prêt à me lancer dans de nouveaux projets de plus grande envergure et, à l’heure actuelle, j’ai déjà entièrement reconstruit mon ancien site, http://www.dofus2.org en me basant sur les connaissances acquises au cours de ce travail de maturité. Par la suite, je compte également me lancer dans un projet de jeu par navigateur de simulation d’un système d’exploitation, presque entièrement programmé en jQuery/Ajax.

J’ai tout de même pu constater que la promotion d’un site de ce genre, surtout pour un public suisse uniquement, est réellement plus compliqué que celle d’un site de contenu. Effectivement, un simple « blog » parlant d’un domaine relativement général, bien conçu et entretenu (par un webmaster averti) arrive généralement aux alentours du millier de visite par jour.

Le choix du site n’a finalement pas été des plus simples, contrairement à ce qui avait été prévu : non pas pour son aspect informatique mais marketing

Mais malgré cela, c’est tout de même sans regret que je clos ce travail de maturité qui, j’espère et je pense, aura été d’une grande utilité pour tous.

 

 

 

 

 

 

 

 

 

 

 

Sources

Ce travail était plutôt particulier, je n’ai pas eu besoin de consulter de livres. A la place de l’ordinaire bibliographie, je vais donc citer les sources que j’ai utilisées pour le développement de ce site.

Scripts Open-Source

De nombreux scripts open-source ont été utilisés dans la conception de ce site internet. Parmi ceux-ci :

Les deux célèbres librairies JavaScript jQuery (ainsi que jQuery UI) et Mootools :

-        http://jquery.com/

-        http://jqueryui.com/

-        http://mootools.net/

Une infime partie de la librairie MooRD, extension de Mootools :

-        http://www.moord.it/

Ainsi que de nombreux plugins tournant sous Mootools :

-        http://andrewplummer.com/code/tablegear/

-        http://mootools.floor.ch/en/

-        http://web-kreation.com/demos/login_form_mootools_1.2/ (particulièrement personnalisé)

-        http://digitarald.de/project/roar/

Et quelques plugins tournant sous jQuery :

-        http://www.quasipartikel.at/multiselect/

-        http://fancybox.net/

-        http://onehackoranother.com/projects/jquery/tipsy/

Ainsi que l’éditeur de texte JavaScript Tiny MCE :

-        http://www.tinymce.com/

Certains de ces plugins sont cependant en train d’être recodés en jQuery afin de pouvoir se libérer de Mootools et pouvoir les personnaliser.

Icônes libres de droits

De très nombreux icônes libres de droit tirés de plusieurs banques d’images. Voici une liste non exhaustive des banques d’icônes utilisées :

-        http://icones.pro/

-        http://www.iconarchive.com/

-        http://findicons.com/

Table des illustrations

Liste des illustrations et images utilisées dans ce dossier :

-        http://blogs.msdn.com/blogfiles/clauer/WindowsLiveWriter/ConfrenceDveloppementdapplicationsriches_8E84/800px-PHP-n_logo.svg%5B1%5D_2.png

-        http://www.jonathan-petitcolas.com/wp-content/uploads/2010/08/javascript.jpg

-        http://www.roul.fr/img/front/logo/logo_mootools.png

-        http://drupal.org/files/images/OQAAAI1PPrJY0nBALB7mkvju3mkQXqLmzMhxEjeb4gp8aujEUQcLfLyy-Sn4gZdkAas6-k8eYbQlGDE-GCjKfF5gIrUA15jOjFfLRv77VBd5t-WfZURdP9V3PdmT.preview.png

-        http://static.commentcamarche.net/www.commentcamarche.net/faq/images/9100-css-logo-medium-s-.png

-        http://lh4.ggpht.com/-Y2X2SRg5NN0/TlwMtxhIfmI/AAAAAAAADiQ/BglREIrInX8/html-text%25255B4%25255D.jpg

-        http://blog.innerlogic.gr/wp-content/uploads/2007/05/mysql_logo.png

-        http://www.haciendoweb.cult.cu/wp-content/uploads/2011/08/apache-web-server-logo.png

-        http://www.bonasavoir.ch/picture/interface/logo.gif

-        http://www.24heures.ch/files/imagecache/468x312/story/22_3.jpg

-        http://programmershotel.com/wp-content/uploads/2009/11/css3-380x285.jpg

-        http://www.novagraaf.ch/files/48952/WWW.jpg


 

Annexes


 

Circulaire 1

Circulaire adressée au étudiants


 

Circulaire 2

Circulaire adressée aux employeurs