1. Note d’intention - Site ECO21 France
1. Contexte de création du site
La revue d’écologie ECO21 Brésil, pour laquelle je suis correspondant local, dispose d’un site web
peu esthétique, datant de la fin des années 90, et qui gagnerait à être entièrement refondu et
modernisé. Voici le lien vers la page d’accueil de ce site : www.eco21.com.br
Parallèlement, la revue aimerait développer ses activités en France. Le projet est encore très vague
mais prenant appui sur cette idée, il m’a semblé un bon support de réflexion pour la création de
mon premier site web, dans le cadre du cours « Outils », dispensé par M. Christian Fondrat.
Ainsi, le site créé aura pour objectif :
 De faire connaître la revue à un public francophone ou bilingue, puisque ECO21 n’existe
qu’en portugais.
Il s’agirait donc dans un premier temps de proposer une sorte de vitrine, simple et
esthétique. Seuls l’éditorial et deux ou trois articles pourront, et ce pour des raisons de
traduction, être proposés en consultation. C’est ce projet que je proposerai en évaluation à M.
Fondrat.
 A partir du code créé pour le site français, de se substituer au site web actuel, en intégrant
ses contraintes et adaptant ses contenus. Ceci dans l’hypothèse où la direction de la revue
serait séduite par la structure, l’ergonomie et le design du nouveau site. Ce projet, qui vient
en prolongement du premier, n’entrera pas dans l’évaluation du cours « Outils ».
Ce site web ECO21 France ciblera donc les mêmes publics qu’ECO21 Brésil, à ceci près que ses
lecteurs seront majoritairement francophones ou encore mieux francophones et lusophones.
Les internautes susceptibles de consulter le site sont donc :
- Le grand public intéressé par la lecture d’articles de vulgarisation sur l’écologie et le
développement durable,
- Plus spécifiquement les publics en lien avec l’écologie ou travaillant/militant dans ce domaine,
- Plus spécifiquement, les internautes francophones et/ou lusophones, qui s’intéressent à l’écologie,
puisque la revue papier est en portugais.
 Perspectives liées au projet
Si le projet mûrit, et si la revue peut supporter financièrement les services d’un ou plusieurs
traducteur(s), alors le site ECO21 France pourra, de simple vitrine, devenir un véritable webzine
écolo. Mais nous n’en sommes pas là.
 Précision quant aux images utilisées
L’un des points forts du site ECO21 France : l’usage d’une banque d’images, dont les droits ont été
concédés à la revue. Cette particularité représente un atout supplémentaire pour la réalisation de
l’un des objectifs du site : produire un visuel esthétique.
CAPRILES_AURORE_projet_site.doc

2. 2. Problématiques
Deux problématiques en lien avec ce projet :
 Un objectif formatif et à visée professionnelle
En premier lieu, ce site :
- sera une démonstration de mes premières créations en HTML et CSS ;
- pourra être intégré à mon e-Portfolio sous la forme d’un lien ;
- permettra de présenter mes réalisations à de potentiels recruteurs ou employeurs.
 Un sous-objectif professionnel
- Réaliser un site « vitrine » simple et esthétique avec pour objectif (ambitieux, certes) de produire
un visuel ostensiblement plus agréable que celui de l’actuel site web ;
- Prendre en compte la nature de l’objet représenté : une revue mensuelle d’écologie et
développement durable ;
- Proposer quelques articles en consultation libre afin de donner au lectorat potentiel une idée du
contenu de la revue ;
- Inclure un formulaire d’abonnement à la revue.
3. Techniques
Les techniques utilisées pour la conception de ce site se basent sur le HTML5 et le CSS3. Aucun
logiciel ne sera utilisé pour réaliser ce site. Il sera codé de A à Z par son créateur.
4. Arborescence
Page d’accueil
Index.html
Id_page=1
Id_parent=0
Ipage
Editorial
edito.html
Id_page=2
Id_parent=1
Article 1
fullEdito.html
Id_page=6
Id_parent=2
Article 2
mouton.html
Id_page=7
Id_parent=2
Légende
Fichier mère, pas de parent, n enfants
1 parent, n enfants
1 parent, pas d’enfants
CAPRILES_AURORE_projet_site.doc
Abonnement
subscription.html
Id_page=3
Id_parent=1
Article 3
lilgirl.html
Id_page=8
Id_parent=2
Goodies
A propos
goodies.html
about.html
Id_page=4
Id_page=5
Id_parent=1
Id_parent=1

3. Sources d’inspiration :
http://pbnaigeon.developpez.com/tutoriel/PHP/conception-site-dynamique/
http://multimedia.uqam.ca/profs/FLP/Site_5050/arborescence.htm
http://www.lecil.fr/fr/webdesign/creer-arborescence-site-web
5. Plan d’action
Mon plan d’action s’appuie sur la méthode préconisée par le site Openclassrooms dans sa
section tutoriel Apprenez à créer votre site web avec html5 et CSS3.
1. Benchmarking : faire une étude de l’existant : commencer par visiter les sites web dédiés à
l’écologie, les sites éditoriaux, de presse spécialisée, puis élargir et prendre en compte tout type
de site dont un détail, une partie, une couleur, pourrait être source d’inspiration dans la création
d’un produit final inédit et original.
2. Maquettage du design
2.1 Structure du site :
Conception du site sur papier : schématiser la structure globale puis page à page
2.1 Design du site :

Choix des images

Choix des couleurs

Choix des polices
3. Organiser le contenu en HTML
4. Mettre en forme en CSS
5. Assurer la compatibilité sous tout navigateur et toute résolution
Ce point représente un objectif très théorique, étant donné mon niveau débutant.
6. Vérifier la validité du code
Utilisation de l’outil « Validator », pour le HTML et le CSS.
http://validator.w3.org
7. Envoyer son site sur le web

Nom de domaine

Hébergeur (000webhost.com)

Client FTP(Filezilla)
CAPRILES_AURORE_projet_site.doc