Discussion :

[RicardoBxl]

JReaux62 et Rodolphe et qui sait les autres,

Après avoir lu vos postes nombreux sur le contenu et ceux que j'ai lu sur le net j'ai pris la peine de réécrire sous un nouveau jour la totalité de ces pages .
Pour rappel le site est www.creditriskmanagement.be

Quand je dis réécrit cela concerne aussi bien le contenu et sa forme que la manière de coder.

Pouvez-me dire si le contenu est clair bien compartimenté et agréable à lire ?
En outre est-ce que le sommaire en haut est une bonne chose ?
Les flèches sont-elles intuitives (revenir en haut de la page)

Quant au code est-il propre selon vous ?

D'avance merci.

Bout de code pour que vous voyez la manière dont j'ai codé:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<h2>Experience en Credit Risk Management</h2>
 
<div id="CreditRiskManagement" class="SectionCenterContent">
 
<span>Sommaire:</span>
 
<a href="#FinancialAnalysis"><?php echo TXT_CreditManagement_FinancialAnalysis ?></a>
<a href="#GraydonDB"><?php echo TXT_CreditManagement_GraydonDB ?></a>
<a href="#Accounting"><?php echo TXT_CreditManagement_Accounting ?></a>
<a href="#CreditLimits"><?php echo TXT_CreditManagement_CreditLimits ?></a>
<a href="#Portfolios"><?php echo TXT_CreditManagement_Portfolios ?></a>
<a href="#Various"><?php echo TXT_CreditManagement_Various ?></a>
 
 
		<h3 class="ECh3" id="FinancialAnalysis">1. Analyses financières</h3>
 
		<article>
 
			<h4 class="ECh4">Ratios</h4>
 
				<p>Analyses verticales et horizontales de bilans et compte de résultats. Calcul de nombreux ratios tels liquidité, solvabilité, structure, 
				rentabilité et cash flow, etc.</p>
 
			<h4 class="ECh4">Fonds de roulement et stocks</h4>
 
				<p>Calcul du fonds de roulement brut, du fonds de roulement net, du besoin en fonds de roulement et du ratio de couverture des stock</p>
 
			<h4 class="ECh4">Autofinancement et cash flow</h4>
 
				<p>Appréciation de la capacité d'autofinancement. Analyses des provisions comptabilisées et des amortissements enregistrés. Politique en matière 
				de rétribution des actionnaires. Part des bénéfices reportés. Stratégie d'investissement. Calcul du cash flow net et du cash flow brut</p>
 
			<h4 class="ECh4">Benchmarking et comptes consolidés</h4>
 
				<p>Analyse de performance d'une entrerprise dans son secteur d'acitivité. Comparaison avec des entreprises de même taille. Analyses consolidées.</p>  
 
			</article>

et CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#CreditRiskManagement article, #News article {
	margin-left:16px;
}
 
 
.SectionCenterContent img{
float:right;
vertical-align:middle;
}
 
 
#MonSite h4{
width:200px;
background: #ff6f00;
    background: -webkit-linear-gradient(#CCCC00, #ff6f00);
    background:    -moz-linear-gradient(#CCCC00, #ff6f00);
    background:     -ms-linear-gradient(#CCCC00, #ff6f00);
    background:      -o-linear-gradient(#CCCC00, #ff6f00);
    background:         linear-gradient(#CCCC00, #ff6f00);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
     0 3px 5px rgba(0, 0, 0, .2),
     0 5px 10px rgba(0, 0, 0, .2),
     0 20px 20px rgba(0, 0, 0, .15);
}

[RicardoBxl]

Et alors personne pour juger ouinnnnnnnnn

Voilà j'ai enfin atteint un résultat que je pense plus que satisfaisant en termes de contenu, forme et ergonomie.

1° Le contenu

J'ai été le plus loin possible dans la description de mon expérience dans le domaine du crédit. On ne pourra pas dire que le contenu n'est pas riche et clair.

Du moins je l'espère

2° La forme

J'ai changé la police du site en Verdana. Il me semble que c'est plus agréable pour lire. En outre j'ai tout divisé dans des balises <article> pour mieux gérer le texte: margin, font size etc.

3° Le design

Le sommaire en haut doit faciliter l'accès à chaque catégorie d'article.
Il est toujours possible de revenir au sommaire via les flèches à droite.

Et pour finir les titres principaux de chaque articles est en vert et les sous titres en orange.

Cela afin de respecter la charte graphique. L'orange est issue du :hover du menu de navigation.



En résumé. Cela donne-t-il envie un peu ou beaucoup de lire la page ?

C'est très important car c'est cette page qui me vend en tant que spécialiste du crédit.

Merci d'avance.

[Invité]

Bonjour Ricardo,
je me suis "amusé" à refaire la mise en page de ton site.
Qu'en penses-tu ?

Bon dimanche...

[RicardoBxl]

Tu as fait comment ?

Tu as pris des images telles quelles ou tu les as travaillé cet effet avec photoshop ?

[RicardoBxl]

Coucou JReaux62,

J'adore. Cela paraît plus structuré

D'avoir mis le bandeau des langues et contacts ainsi que les widgets réseaux sociaux à gauche çà donne une impression d'harmonie.

Mais je le reconnais sans honte depuis le début que je bosse sur mon site le parent pauvre de mon travail est le design. Je suis nul il faut que je l'avoue

Je ne serai jamais un artiste.

Mais heureusement qu'il y en a comme toi

Euh tu me refiles le code où c'est une nouvelle épreuve que je dois passer

En tout c'est sympa d'avoir pris le temps de faire cette maquette.

Bien à toi,

[Invité]

J'adore. Cela paraît plus structuré

Y'a pas photo.

Je n'ai rien codé : ça, c'est ton boulot, Petit Scarabée !!

Pour les pictos, on trouve de nombreux sites de pictos/icones, dont
=> http://icones.pro/

Un début de code :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#machin { clear:both; margin:15px 0; padding:0; }
#machinLeft { float:left; margin:0; padding:0; width:25%; }
#machinRight{ float:right; margin:0; padding:0; width:75%; }

Comme tu vois :

épreuve n° 2 : mettre des dimensions (principales) en % !

Voilà le "plan de montage".

[RicardoBxl]

OK ok je vais retravailler la structure lol.

Mais avec plaisir tant cela me plait ce que tu as fait comme boulot.

Je rends ma copie dans les prochains jours lol car là je bosse intensément sur le contenu du site.

a plus tard

[Invité]

Avant tout, pense bien à DESSINER LA STRUCTURE du site.
(comme je l'ai fait. Je t'en ai laissé un peu...)

C'est primordial pour bien positionner/imbriquer les "boites" (<div>).

N.B. On peut faire une variante, avec "head-nav" et "menu-nav" dans le m^me div (sur la même ligne).
A toi de voir.

Ci-joints les pictos sociaux utilisés.

[RicardoBxl]

Chef,

J'ai bien noté cela. D'ailleurs ayant à coeur de garder un code propre depuis mon dernier devoir sur les position:aboslute et relative je ne me lancerai pas dans ces modification majeures de la structure du site avant d'avoir obtenu un contenu de qualité.

D'ailleurs tu as encore rien dit sur le contenu. Jette oeil au poste que j'ai mis à ce sujet plus haut.

Suite à nos conversations sur la multitudes des tâches entreprises j'ai décidé de donner des priorités.

Qualité du contenu en premier

Repensé le design que tu m as proposé en second

et continuer mon travail sur le référencement en troisième

Allez je retourner coder...

[rodolphebrd]

Bravo Jreaux62 pour ce travail d'aide.

La maquette est très réussie.

[RicardoBxl]

Cher Monsieur JReaux;

Comme vous le verrez dans la copie d'écran jointe je travaille actuellement sur la refonte du design.

Ne fais pas attention aux dimensions car je me focalise sur le positionnement des boîtes actuellement. La finition va suivre.

Je ferai en sorte de vous remettre ma copie au plus tard en fin de semaine

Euh les épreuves sont terminées après celle-ci ou je dois encore m'attendre à d'autres choses

Allez zouuuuuuuuu je file.

Ricardo

et ci-dessous le code. Tu noteras qu'il n'y a pas une seule position:absolute lol

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<body>
 
		<div id="PageContainer">
 
			<div id="BannerLogo">
 
 
				<?php echo "<a href=\"{$fileHome}\"><img src=\"Images/AR3D2.png\" id=\"Logo\" alt=\"Home Page\" title=\"Ricardo Arrabito - Credit Controller\"/></a>"?>
 
				<img src="Images/ricardo-banner.png" id="Banner" alt="Bannière" /></a>
 
			</div>
 
			<header>
 
				<div id="SousNavLanguesSite">
 
					<ul>
 
						<li><a href="CV.php?lang=en"><img src="Images/icon_en.png"
							alt="English" /></a>
						</li>
						<li><a href="CV.php?lang=fr"><img src="Images/icon_fr.png"
							alt="French" /></a>
						</li>
						<li><a href="CV.php?lang=nl"><img src="Images/icon_nl.png" 
							alt="Dutch" /></a>
						<li><a href="UnderConstruction.php"><img src="Images/icon_al.png" 
							alt="German" /></a>
 
					</ul>
 
				</div> 
 
				<div id="SousNavUtile">
 
					<ul>
 
						<li><?php echo "<a href=\"{$fileHome}\"><img src=\"Images/home-icone-7954-16.png\" alt=\"Home Page\" />"?> Home</a></li>
						<li><a href="#"><img src="Images/plan-du-site-de-la-couleur-icone-8079-16.png" alt="Site Map"/> Site map</a></li>
 
					</ul>
 
				</div> 
 
				<h1>JReaux62 tu me fais suer !!!</h1>
 
			</header>
 
			<div id="Container">		
 
				<section class="SectionLeft">
 
				<?php
                                
                                        include('CorpsHTML5/SectionLeft.php');
                                                                                                                                                
                                ?>
 
				</section>
 
			<section id="SectionCenter">
 
				<?php
                                
                                        include('CorpsHTML5/Nav.php');
                                
                                ?>
 
				<?php
                                                                                
                                                if ($langpage == 'fr') 
                                                {
                                                        include('Langues/Text_fr.php'); 
                                                }
                                                else if ($langpage == 'en') 
                                                {
                                                        include('Langues/Text_en.php'); 
                                                }
                                                else
                                                {
                                                        include('Langues/Text_nl.php'); 
                                                }                                               
                                                
                                        
                                                                                
                                ?>
 
			</section> 
 
			</div>
 
		</div>
 
	</body>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
#Logo{
float:left;
}
 
#Banner{
float:left;
}
 
#PageContainer{
width:1200px;
}
 
#SousNavLanguesSite{
clear:both;
float:left;
display:inline-block;
width;150px;
}
 
#SousNavLanguesSite ul{
list-style-type:none;
margin-top:30px;
padding:0;
}
 
 
#SousNavLanguesSite li{
float:left;
margin-right:17px;
}
 
#SousNavUtile{
clear:both;
float:left;
display:inline-block;
margin-top:10px;
width:150px;
background: #9ACD32;
	background: -webkit-linear-gradient(#CCCC00, #9ACD32);
    background:    -moz-linear-gradient(#CCCC00, #9ACD32);
    background:     -ms-linear-gradient(#CCCC00, #9ACD32);
    background:      -o-linear-gradient(#CCCC00, #9ACD32);
    background:         linear-gradient(#CCCC00, #9ACD32);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);
}
 
#SousNavUtile ul{
list-style-type:none;
padding:0;
margin:0;
}
 
#SousNavUtile li{
float:left;
padding:0;
margin-left:5px;
}
 
#SousNavUtile a{
text-decoration:none;
}
 
 
 
header h1{
float:left;
font-size:2.300em;
margin:10px 0 0 152px;
color:black;
 
}
 
#ContentLeft{
clear:both;
float:left;
width:147px;
margin-top:12px;
color: #FFFFFF;
background: #000000;
background: -webkit-linear-gradient(#000000, #696969);
background:    -moz-linear-gradient(#000000, #696969);
background:     -ms-linear-gradient(#000000, #696969);
background:      -o-linear-gradient(#000000, #696969);
background:         linear-gradient(#000000, #696969);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
			0 3px 5px rgba(0, 0, 0, .2),
			0 5px 10px rgba(0, 0, 0, .2),
			0 20px 20px rgba(0, 0, 0, .15);
 
padding:5px;
font-size:0.875em;
}
 
#vcard{
float:left;
}
 
.fn {
font-weight:bold;
}
 
#FbLinTw{
display:inline-block;
}
 
#FbLinTw ul{
margin:0;
padding:0;
list-style-type:none;
}
 
#FbLinTw li{
float:left;
margin-left:1px;
}
 
#GooDel{
display:inline-block;
margin-top:-10px;
}
 
#GooDel ul{
margin-left:20px;
padding:0;
list-style-type:none;
}
 
#GooDel li{
float:left;
margin-left:5px;
}
 
#iconEmail{
float:right;
}
 
.tel{
clear:both;
float:left;
margin:0;
padding:0;
}
 
#SectionCenter{
float:left;
width:840px;
margin-left:10px;
}
 
/* Navigation */
 
nav{
	float:left;
	margin: 12px 0 10px 0;
}
 
nav ul{
	list-style-type:none;
	margin:0;
    padding:0;
}
 
nav li{
	width:130px;
	background: #9ACD32;
	background: -webkit-linear-gradient(#CCCC00, #9ACD32);
    background:    -moz-linear-gradient(#CCCC00, #9ACD32);
    background:     -ms-linear-gradient(#CCCC00, #9ACD32);
    background:      -o-linear-gradient(#CCCC00, #9ACD32);
    background:         linear-gradient(#CCCC00, #9ACD32);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);
 }
 
nav li ul{
	position:absolute;
	z-index:99;
}
 
nav .M li{
	float:left;
}
 
nav .M li ul{
	display:none;
}
 
nav .M li:hover ul{
	display:block;
}
 
nav .M li:hover ul li{
	float:none;
}
 
nav a{
	display: block;
    text-align: center;
	line-height:1.125em;
    color: #000000; 
	text-decoration: none;
    padding: 8px 8px 17px 8px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
 
}
 
nav .M li a:hover{
 
	background: #ff6f00;
	background: -webkit-linear-gradient(#CCCC00, #ff6f00);
    background:    -moz-linear-gradient(#CCCC00, #ff6f00);
    background:     -ms-linear-gradient(#CCCC00, #ff6f00);
    background:      -o-linear-gradient(#CCCC00, #ff6f00);
    background:         linear-gradient(#CCCC00, #ff6f00);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);
}
 
.AudioRecording {
display:inline-block;
margin-left:-20px;
padding:0px;
}
 
.AudioRecording ul{
list-style-type:none;
margin:0px;
padding:0px;
}
 
.AudioRecording ul li{
float:left;
margin-left:20px;
}
 
.SectionCenterContent h5{
font-size:1em;
}
 
.SectionCenterContent img{
float:right;
vertical-align:middle;
}
 
.SectionCenterContent .AudioRecording img{
float:left;
vertical-align:middle;
}
 
.SectionCenterContent a{
text-decoration:none;
font-weight:bold;
}
 
.SectionCenterContent  a:link, .SectionCenterContent  a:visited{
	margin-left:10px;
	color:blue;
}
 
.WebDev h4, .SEO h4, .SectionCenterContent h3{
	padding-left:5px;
	line-height:1.8em;
	background: #9ACD32;
	background: -webkit-linear-gradient(#CCCC00, #9ACD32);
    background:    -moz-linear-gradient(#CCCC00, #9ACD32);
    background:     -ms-linear-gradient(#CCCC00, #9ACD32);
    background:      -o-linear-gradient(#CCCC00, #9ACD32);
    background:         linear-gradient(#CCCC00, #9ACD32);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);
}
 
.SectionCenterContent  h4{
width:460px;
background: #ff6f00;
	background: -webkit-linear-gradient(#CCCC00, #ff6f00);
    background:    -moz-linear-gradient(#CCCC00, #ff6f00);
    background:     -ms-linear-gradient(#CCCC00, #ff6f00);
    background:      -o-linear-gradient(#CCCC00, #ff6f00);
    background:         linear-gradient(#CCCC00, #ff6f00);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);
}

[RicardoBxl]

Coucou JReaux,

Pour revenir au nouveau design je me posais la question de savoir que mettre éventuellement à droit de la bannière. Car comme on peut le voir c'est vide.

Et si vous tous vous avez l'une ou l'autre idée encore n'hésitez pas je suis preneur.

[Invité]

Bonjour Petit Scarabée,

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
html, body {
   width:100%;
   min-height:100%;
   height:100%;
   margin:0;
   padding:0;
}
#PageContainer{
   min-width:800px; /* largeur mini*/
   max-width:1200px; /* largeur maxi */
   margin:0 auto; /* centrage horizontal */
}

Les autres <div> doivent avoir des dimensions en %.

Ainsi :

• si la fenêtre fait moins de 800px : le container "se bloque" sur 800px, et une barre de scroll horizontal apparaitra
• ton site s'adaptera en fonction de la largeur de la fenêtre, de 800px à 1200px
• si la fenêtre fait plus de 1200px, le container "se bloque" sur 1200px, se centrera automatiquement dans la fenêtre.

[RicardoBxl]

JReaux,

Je dois t'avouer que je ne maîtrise pas bien ce concept.

Donc laisse moi le temps de l'étudier et cela sera fait.

Depuis que j'ai débuté l'apprentissage du développement web c'est un des rares points que je n'ai pas très bien compris.

[Invité]

Voici un exemple => http://codepen.io/jreaux62/pen/aGdqA
Essaie de modifier la largeur de la fenêtre du navigateur.

[RicardoBxl]

JReaux,

Voilà ce que cela donne.

J'ai donc mis les % où tu m'as demandé de les mettre.

Au fait pour le menu de navigation, dois-je aussi indiquer la taille en % ?
Actuellement chaque item a 130px. Tu écrirais cela comment ?

J'ai changé la couleur de fond. de la page.

Ton avis à ce stade ?


Ricardo

[RicardoBxl]

JReaux62,

J'ai un souci avec les widgets de réseaux sociaux.

Bien que j'ai réduit la taille en largeur le widget Twitter ne revient pas à la ligne.

Cooment as tu fait ?

Ricardo

[RicardoBxl]

Coucou JReaux,

Voilà je te rends ma copie.

Bon sache que je planche encore sur certains trucs.

Mais cette fois-ci je veux me focaliser à 100 % sur le contenu.

Par conséquent j'espère que le design que je présente suite à ta maquette vous conviendra tous. D'autant plus que je sais que c'est primordial pour que l'internaute ait envie de visiter un site.

Alors j'attends vos réactions.

PS Quand je clique sur le drapeau anglais le mot "Téléphones" change de place. Une explication ?

[RicardoBxl]

Bonsoir à Tous,

A JReaux et aux autres,

Bon d'une part j'ai tenu compte de ce que JReaux avait proposé et d'autre part des différentes remarques récentes postées sur Webrankinfo. Je poste en effet sur les deux sites pour un retour d'expertise maximum.

J'ai passé toute la journée à repensé le design du site. Il est vrai que celui qui est proposé sur mon adresse officielle est laid à pleurer. J'ai totalement foiré.

Donc sur mon adresse non officielle http://myspace.voo.be/rarrabito/ vous pourrez voir cette dernière tentative.

[Invité]

Hello Ricardo,
voilà un site qui a de la gueule personnalité !

A part le mini bandeau en haut (drapeaux + compteur de visite)
1/ => supprime complètement le compteur de visite !! (déjà dit)
C'est totalement "has been" et sans intérêt (ni pour toi, ni pour les autres).
2/ Mets les drapeaux en haut à droite, SUR l'image.

Quant à l'adaptabilité, ce n'est pas encore tout-à-fait ça.
=> Je regarde ça, et je reviens...