Site Web Centrale Eco

28
Charlotte Demay Emilie Leduc Clémence Decugis Mickaël Dubucq Centrale Eco Plateforme d’achats de produits de développement durable destinée aux entreprises Site Web

description

Projet de fin d'année. MMTI 2008 ISC PARIS

Transcript of Site Web Centrale Eco

Page 1: Site Web   Centrale Eco

Charlotte DemayEmilie Leduc

Clémence DecugisMickaël Dubucq

Centrale Eco

Plateforme d’achatsde produits de développement durable

destinée aux entreprises

Site Web

Page 2: Site Web   Centrale Eco

• Zoom sur Centrale Eco– Ce que propose Centrale Eco– Modèle économique

• Site web de Centrale Eco– Etudes préalables– Gantt– Architecture– Storyboard– Charte graphique– Technologies employées– Outils utilisés– Site web php, xhtml et css

• Démonstration du site web– Navigation– Accessibilité– Enregistrement en vue d’un achat– Achat d’un produit– Gestion de la plateforme E-Commerce

Page 3: Site Web   Centrale Eco

Centrale Eco Offre modèle économique / Site Web / Démonstration

Comment pénétrer le marché des produits de développement durable sans prendre de risques qu’ils soient financiers ou humains ?

Plateforme d’achats

Solution de e-logistique

Notre solution en marque blanche

Formations

Conseils

Page 4: Site Web   Centrale Eco

Centrale Eco Offre modèle économique / Site Web / Démonstration

Page 5: Site Web   Centrale Eco

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Définition de l’audience

Notre cible

Pourquoi viendraient-ils le consulter?

Les informations recherchées

Leurs besoins

Nos points forts

Page 6: Site Web   Centrale Eco

Etude de la concurrence

Style Rapidité Navigation Design Ergonomie Fonctionnalités Contenu Interactivité

ConsoGlobe ++ ++ + + + - ++ -

Econology - + ++ -- - ++ + --

Solidar Monde ++ - - ++ ++ + + +

Achats Concepts Eco

+++ ++ - + ++ + ++ +

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Page 7: Site Web   Centrale Eco

Détermination de l’objectif

Pourquoi créer ce site?

Moyens mis en œuvre

Notre ligne directrice

Votre plateforme d’achats de produits de développement durable

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Page 8: Site Web   Centrale Eco

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Page 9: Site Web   Centrale Eco

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Page 10: Site Web   Centrale Eco

Accueil

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Page 11: Site Web   Centrale Eco

Qui sommes-nous?

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Page 12: Site Web   Centrale Eco

Notre offre

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Page 13: Site Web   Centrale Eco

Zone

adhérent

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Page 14: Site Web   Centrale Eco

Nous contacter

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Page 15: Site Web   Centrale Eco

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Largeur des pages : 1024px

Hauteur des pages : 800px

Mode d’alignement des pages dans la fenêtre de navigation : Centré / Float Center

Police de caractère : Verdana sans shérif

Code couleur: dégradé de vert et de bleu

Page 16: Site Web   Centrale Eco

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Page d’accueil

Page 17: Site Web   Centrale Eco

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Autres pages

Page 18: Site Web   Centrale Eco

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Sky blue Deep sky blue Light sea green Pale green Yellow green Sea green#87ceeb #00bfff #20b2aa #98fb98 #9acd32 #2e8b57

Etude chromatique

Page 19: Site Web   Centrale Eco

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Eléments graphiques

Page 20: Site Web   Centrale Eco

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Eléments graphiques

Page 21: Site Web   Centrale Eco

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Typographie

Bradley hand ITC, 14 pts et 12 pts

Centrale Eco, une plateforme d’achat innovante.

A l’instar de beaucoup d’entre nous, je me sens plus que jamais concernée par la cause du développement durable.

Verdana ; 12 pts

Verdana bold; 16 pts

Verdana bold; 16 pts

Page 22: Site Web   Centrale Eco

Technologies employées:

Xhtml

Base de données MySQL: gestion des ressources,

des produits, des contacts, des clients…

PHP: créer un formulaire

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Page 23: Site Web   Centrale Eco

Outils utilisés:

Xhtml : Dreamweaver

Base de données MySQL: PHPmyAdmin

PHP: Bloc note

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

Page 24: Site Web   Centrale Eco

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

1. Type de commande<form method="POST" action="nadform.php" name="AVIS">

2. Elaboration du formulaire<input type="text" name="champ1" size="20">

<p>Votre prénom :<br><input type="text" name="champ2" size="20"></p>

<p>Email :<br><input type="text" name="champ4" size="20"></p>

<p>Vous voulez :<br><br/><input type="radio" name="champ7" value="Reponse7_2">avoir accès au catalogue sans devenir client</p><input type="radio" value="Reponse7_1" name="champ7">commander des produits et devenir client</p><br/><br/><input type="radio" name="champ7" value="Reponse7_3">devenir fournisseur</p>

<p>Laissez-nous un message...<br><textarea rows="4" name="champ6" cols="40"></textarea></p>

<input type="submit" value="Envoyer" name="envoyer">;<input type="reset" value="Recommencer" name="recommencer">

Comment nous contacter? Code dans HTML

Page 25: Site Web   Centrale Eco

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

1. Fonction de contrôle du mail$MailTo = "[email protected]"; //adresse à laquelle sera envoyé le contenu du formulaire$MailSubject = "nouveau contact centrale eco"; //texte qui va figurer dans le champ "sujet" du email$MailHeader = "$champ4"; //adresse email qui va figurer dans le champ "expéditeur" du mail

2. Attribuer une valeur aux variables et les stocker dans la variable MailBody (message) if ($champ1 == ""){ echo("Vous n'avez pas complete le champ NOM.<br>"); //message qui s'affiche si le visiteur n'a pas rempli ce

champ $Envoi = 0; //si le champ1 n'a pas été rempli, la variable envoi prend la valeur de 0 }else { $MailBody .= "Question 1 : $champ1\n"; //si le champ1 contient de l'information, elle est stockée dans la variable MailBody}

if ($champ2 == ""){ echo("Vous n'avez pas complete le champ PRENOM.<br>"); $Envoi = 0; }else { $MailBody .= "Question 2 : $champ2\n"; }

if ($champ4 == ""){ echo("Vous n'avez pas complete le champ EMAIL<br>"); $Envoi = 0; }else { if (check_mail($champ4)) { $MailBody .= "Mail : $champ4\n"; }else { echo("L'adresse e-mail n'est pas valide<br>"); $Envoi = 0; }

$MailBody .= "Votre texte : $envoi_champ6\n";}

if ($champ7 == ""){ echo("Que voulez vous faire?<br>"); $Envoi = 0; }else { $MailBody .= "Question 7 : $champ7\n";}

Comment nous contacter? (2) Code dans Nadform.php

Page 26: Site Web   Centrale Eco

Centrale Eco / Site Web Etudes Gantt Architecture Storyboard Charte graphique

Technologies Outils Php, Xhtml, CSS / Démonstration

3. Envoi du message

if ($Envoi == 1) { //vérification que la variable envoi est bien à 1

echo("<p><strong>Votre nom ou pseudo : <font color=\"#0000FF\">$champ1</font>\n");echo("<br>Votre prenom : <font color=\"#0000FF\">$champ2</font>\n");echo("<br>Votre email : <font color=\"#0000FF\">$champ4</font>\n");echo("<br>Votre texte : <font color=\"#0000FF\">$affich_champ6</font>\n");echo("<p>&nbsp;</p>");

mail($MailTo, $MailSubject, $MailHeader); //envoi du message

echo("<p>Votre message a bien ete envoye.<br>Merci de vos commentaires.");echo("<p>&nbsp;</p><p>&nbsp;</p><p align=\"center\"><a href=\"contact.html\">Retour</strong></a></p>");

//affichage d'un message de confirmation.}?>

Comment nous contacter? (3) Code dans Nadform.php

Page 27: Site Web   Centrale Eco

Navigation

Accessibilité

Enregistrement en vue d’un achat

Achat d’un produit

Gestion de la plateforme E-commerce

Centrale Eco / Site Web / Démonstration

Page 28: Site Web   Centrale Eco

Merci de votre attention…

Avez-vous des questions?