Projet : Mise en place d’une charte graphique pour un site de géo-localisation.

Impératif : Le site doit être compatible avec l’ensemble des navigateurs du marché dont :

-  Internet Explorer 7.0 et +

-  Firefox 3.0 et +

-  Chrome 9.0 et +

-  Netscape 6.0 et +

-  Opéra  10.0 et +

Les livrables :

-  Feuille de style, logo, fonction JavaScript, objet flash et tout autre élément permettant la mise en place de la charte graphique.

-  Un descriptif d’utilisation de l’ensemble des objets (flash, fonction JavaScript, etc.…) dans un document Word.

Pièces jointes : L’exemple fourni en pièce jointe « exemple1.png » n’est pas une finalité en soit. Il permet au prestataire du contrat de se faire une idée du résultat recherché. Nous précisons pour l’exécution de ce contrat que nous recherchons un regard neuf et innovateur pour un site de géo localisation.

Point d’attention : afin d’avoir une utilisation sur mobile, le Flash n’est pas accepté.

Elément obligatoire : En plus de la charte graphique, certains éléments graphiques animés devront obligatoirement être fournis par le prestataire signataire. Ces éléments devront pouvoir être manipulés à partir de fonction JavaScript. Ces éléments sont fournis ci-dessous en précisant les points suivants :

-  Nom de l’élément.

-  Une image exemple pour illustration : attention cette image est un exemple, et le regard neuf de l’infographiste sera grandement apprécié.

-  Les paramètres d’entrée/sortie de la fonction JavaScript qui nous permettent de manipuler l’objet graphique.

-  Une explication de son fonctionnement.

-  Un contexte de fonctionnement.

Elément 1 :

            Nom : GPS

                Image Exemple : gps.png

                Paramètres :

                         E -> Date : date

                   E -> Array : Adresse

                         S -> boolean : lancement OK ou non

                Fonctionnement : Cet élément devra afficher la date, l’heure et le lieu.

Contexte : Cette fonction sera appelée dans une page Web à intervalles de temps réguliers.

Elément 2 :

            Nom : Compteur

                Image Exemple : compteur.png

                Paramètres :

                         E -> int : temps

                         E -> float : vitesse1 (vitesse en Km/h)

                         E -> float : vitesse2 (vitesse en Km/h)

                   E -> float : km

                         E -> boolean : avec ou sans son

                         S -> boolean : lancement OK ou non

Fonctionnement : Cet élément devra animer l’objet de façon à faire varier la vitesse de « vitesse1 » à « vitesse2 » durant le temps « temps » imparti. La variation devra être fluide et sans à coup. Les compteurs digitaux (à chiffres) ne sont pas admis.

Contexte : Cette fonction sera appelée dans une page Web à intervalles de temps plus ou moins réguliers. Cependant les paramètres « vitesse1 » et « vitesse2 » seront initialisés de façon logique. Exemple ({v1=0, v2=20} {V1=20, V2=30} {V1=30, V2=35} {V1=35, V2=0})

Elément 3 :

            Nom : Information vitesse

                Image Exemple : info_vitesse.png

                Paramètres :

                         E -> int : Vitesse

                   E -> String : libellé (Km/h ou miles par exemple)

                         S -> boolean : lancement OK ou non

Fonctionnement : Cet élément devra afficher la vitesse sur un panneau digital.

Contexte : Cet élément sera le plus souvent employé pour afficher des vitesses moyennes, maxi, mini, etc…

Elément 4 :

            Nom : Information signal

                Image Exemple : info_signal.png

                Paramètres :

                         E -> float : force (force du signal en %)

                   E -> String : libellé

                         S -> boolean : lancement OK ou non

Fonctionnement : Cet élément devra afficher la force d’un signal et le nom correspondant au signal.

Contexte : Cet élément sera le plus souvent employé pour afficher la force d’un signal satellite ou d’un réseau téléphonique.

ATTENTION : L’appel de la fonction JavaScript permet de lancer une animation sur un élément. EN AUCUN CAS LE PROGRAMME APPELANT LA FONCTION DOIT ÊTRE BLOQUE EN ATTENDANT LA FIN DE L’ANIMATION. Lorsque l’on appelle la fonction JavaScript, l’animation doit se lancer et laisser la main au programme JavaScript appelant (fonctionnement Asynchrone). De plus, l’appel successif de la fonction JavaScript ne devra pas donner une impression de scintillement (ou de rechargement d’image). Seules les informations devant être modifiées devront être animées.

PS : Le choix de la technologie client « JavaScript » n’est pas une obligation. D’autres technologies peuvent être utilisées dans la mesure où leur fonctionnement est correctement décrit. Si une autre technologie est utilisée, le prestataire devra le signaler avant la signature du contrat.

Autres éléments obligatoire :

-  Un panel de 25 à 30 icônes vectorielles afin que nous puissions les redimensionner sans perte de qualité sous adobe illustrator. Le thème de chaque logo sera fourni durant le projet.

-  Deux types de bouton de menu (car deux menus possibles sur la même page) avec éventuellement des sous-menus. Dans le fichier « exemple1.png », il y a un menu pour la page et un menu pour la map.

-  Une animation flash (qui serait probablement la seule) ou vidéo à déterminer servant de bandeau au site. Cette animation doit être de type futuriste, un peu à la « Mission impossible ». Pour préciser nos pensées, voici comment nous voyons la chose : une vue de la Terre depuis l’espace, puis une vue d’un satellite. On rentre dans l’œil du satellite, qui nous fait un zoom sur une partie géographique de la Terre. Un arrêt sur image. On voit une zone géographique. De nouveau un zoom, puis un arrêt sur image, et on voit un quartier (de préférence de Nouméa – Nouvelle Calédonie). Un quadrillage se met en place et les rues du quartier clignotent. On passe sur un plan incliné. Un zoom de nouveau, on voit un véhicule qui se fait poursuivre, puis un zoom sur le véhicule. La fin reste à définir par l’infographiste.

-  L’arrière plan du site doit être dimensionné à la taille du navigateur, même si la taille du navigateur varie après le chargement de la page.

ATTENTION : Les éléments obligatoires ne dispensent pas pour le prestataire signataire, de procurer pour le reste du site,  une vraie charte graphique avec les objets (log, image, feuille de style, etc…).

PS : Le logo existe, la prestation demandée sur le logo est un relookage afin qu’il s’adapte au site. Le logo sera fourni après signature.

Méthode de travail :

  Pour la charte

o Trois maquettes (juste une maquette sans finition) de la charte graphique devront nous être proposées. Les maquettes devront être sensiblement différentes.

o Lorsque nous aurons choisi une maquette, le prestataire signataire devra nous proposer trois chartes graphiques avec des thèmes de couleurs et éventuellement de formes différentes. Nous entendons par forme, des tableaux à bouts carrés ou ronds, des boutons plus ou moins différents, etc…

o Nous choisirons une charte à laquelle nous gardons le droit de demander au prestataire signataire d’effectuer des modifications mineures sur la charte durant la durée du projet.

Pour les éléments obligatoires : On garde à peu près le même principe.

o Pour chaque élément, présentation de trois aspects différents. Par exemple, pour le compteur, il y aura une présentation de trois compteurs.

o Une fois l’élément (le compteur dans notre exemple) choisi, le prestataire devra nous présenter 3 thèmes (allant avec la charte préalablement choisie) différents.

o Nous choisirons un thème auquel nous gardons le droit de demander au prestataire signataire d’effectuer des modifications mineures (taille, nuance, etc…)