www.creditriskmanagement.be

**RicardoBxl** · 16/08/2013, 12h07

Bonjour à Tous,

Jreaux m'avait dit que trop de pages n'inciteraient pas les recruteurs à parcourir le site.

Cela m'a amené à avoir une réflexion sur l'onglet Langues de mon menu.

Selon vous serait-t-il mieux que dès le clic sur l'onglet Langues on arrive sur une page qui présente mes connaissances en langues et ce les unes après les autres ou puis-je garder la solution actuelle ? Pour rappel un onglet par langue donc une page par langue.

Merci de votre réponse.

Invité · 16/08/2013, 12h56

A ta place,
je SUPPRIMERAIS cet onglet "Langues" (qui, soit dit en passant, n'est pas... parlant !) (Ouh, la bonne vanne ! )
Il aurait dû s'appeler "Présentation" ou "Je me présente..."

Sauf erreur, ça sert UNIQUEMENT à un recruteur, pour évaluer ton niveau/accent dans la langue...

Bref :

Je mettrais cette "Présentation audio " sur la page d'ACCUEIL.
ET avec les 3-4 séquences audio OUVERTES (inutile de passe par un clic sur un drapeau) : on peut cliquer directement sur l'audio qu'on veut.
Enlève : autoplay="autoplay"
De fait, la variable "lang2" n'est plus utile dans l'URL.

**RicardoBxl** · 16/08/2013, 13h33

je SUPPRIMERAIS cet onglet "Langues" (qui, soit dit en passant, n'est pas... parlant !) (Ouh, la bonne vanne ! )

Mais quel humour

Bon je vois ce que tu veux que je fasse. Que ma page d'accueil regroupe le plus d'info pertinentes de sorte que dès que l'on arrive sur celle-ci on trouve ce que l'on veut.

Je me pose la question du taux de rebond en t'écrivant. Si ils ont un grand nombre d'infos dès la première page cela risque d'augmenter le taux de rebond.

D'un autre côté ils ont immédiatement une vue d'ensemble.

Quel casse tête grrrr

Invité · 16/08/2013, 13h51

Tu te poses trop de questions... pas forcément utiles.

La page "Accueil" est justement celle qui doit donner envie d'en lire plus sur le site.

De plus, une tendance actuelle est de réaliser des sites avec une seule et unique page (avec navigation par scroll, soit directe, soit au clic sur un lien/ancre).
Le "taux de rebond" n'a alors plus la moindre signification...

**RicardoBxl** · 16/08/2013, 13h54

Mais depuis que je me suis lancé dans le Web Development il y a près de 10 mois je ne fais que me poser un tas de questions.

C'est quand-même çà qui me fait avancer.

Bon je suis d'accord faut pas exagérer mais bon je suis ainsi lol.

Contenu repensé SEO
Bon j'ai pris le temps de repenser mon contenu et la couleur de fond et du texte à la lumière de vos remarques diverses et des prescriptions SEO.

Après ces modifications et quelques unes encore indiquées plus loin je ne toucherai plus au site.

Alors dites-moi si le design tel qu'il est et le contenu donne enfin envie de visiter mon site. (mettez-vous à la place d'un recruteur pas de la ménagère du coin cherchant un site pour faire ses courses

)

Cela a donné ceci comme résultat:

- chaque page se voit attribuer un titre <title> unique quelle que soit la langue
- chaque page se voit attribuer une description unique dans <meta name="description">
- chaque page se voit attribuer un titre <h1> unique et clair
- l'onget Langues du menu a disparu à la faveur de trois enregistrements audio proposés en page d'accueil
- la section News (le petit journal qui bougeait pour rappel

) a disparu pour ne s'afficher que si l'on clique sur l'onglet approprié du menu (tout à droite)
- les mots clés sont mis en <strong>
- les textes sont de types <h2> <h3> <p> donc rédigés selon les desideratas de Google
- les textes sont aérés: utilisation des margin et padding

- suppression des border et et coins arrondis pour faire ressortir les ombres

Et en cours d'étude

- Prévu: réécriture des textes non plus avec des ul mais avec <h2> <h3> et <p>

- création d'un sprite CSS pour les icones de réseaux sociaux

- Changement d'opacité au passage de la souris sur les icones de réseaux sociaux
- réécriture des données de contact via hcard
- modification du footer en termes de contenu. A présent il est fixé en bas en absolute.

Voilà ce que cela donne:

Invité · 16/08/2013, 16h57

L'image est prometteuse !
Tu ne l'as pas encore mis en ligne ?

N.B. Pour de dégradé la colonne de gauche => CSS3 Gradient Generator

**RicardoBxl** · 16/08/2013, 17h00

Coucou Jreaux62,

Non je travail sur mon serveur de développement.

Je me suis posé la question de savoir si il n'y a pas un risque de duplicate content si mon site est accessible sur les deux adresses que tu connais.

peux-tu me dire si je risque cela ?

Invité · 16/08/2013, 17h03

Tu crois vraiment que Google n'a que toi à ~~espionner/~~visiter ?

Je réponds :

"lol."

**rodolphebrd** · 16/08/2013, 17h08

J'ai visité le site sur Ipad et j'obtiens ce résultat :
Nom : photo.jpg
Affichages : 44
Taille : 290,3 Ko

Le contenu est masqué et pas consultable...

**RicardoBxl** · 16/08/2013, 17h55

Lol JReaux je me doute bien que je ne suis pas le seul.

Mais sans doute fais-je preuve de parano

Ok j'ai compris j'envoie tout dans les minutes qui suive sur l'adresse http://myspace.voo.be/rarrabito/

Rodolphe,

Je vois et c'est pas bien grrrr

. Mais comme dit dans un des posts précédent je m'occuperais du Responsive Web Design quand je serai arrivé à quelque chose de suffisamment bien sur ordinateur de bureau.

Une chose à la fois

Voilà j'ai transféré les fichiers sur mon serveur de production

http://myspace.voo.be/rarrabito/

Invité · 16/08/2013, 18h28

C'est bien mieux (pour le design)

MAIS... (car il y a toujours un "mais" !)

Ton CSS est complètement pourri :

Beaucoup trop d'éléments en position:absolute !
Tu en fais un usage abusif et mal-à-propos.
Exemple :

Code :

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

1
2
3
4
footer {
    position: absolute;
    top: 1200px;
}

Je re-dis : "LOL" !

Idem pour les éléments du header, le menu et pictos sociaux...

OK, ça "rend bien" sur ton écran... Sauf que...

Vu la relative (! encore humour !) simplicité de ta mise en page, tu peux t'en sortir UNIQUEMENT avec :
float:left;
clear:both;

=> Div et CSS : une mise en page rapide et facile
Revois ta copie, si tu veux pouvoir faire ensuite du responsive design...
Accroche-toi ! L'apprentissage ne fait que commencer !

[EDIT] Ce n'est pas l'heure de l'apéro ?
"à consommer avec modérateur" (n'est-ce pas, rodolphebrd ? )

**rodolphebrd** · 16/08/2013, 18h29

Bon je vais certainement reprendre ce que jreaux62 a certainement mentionné auparavant (j'ai pas le courage de tout lire).

Le texte mis en évidence est trop prononcé.
On se perd entre informations importantes et titres.
Les liens de couleur bleu pourraient être en vert ou une nuance de rouge pour rester harmonieux et éviter de rajouter une couleur rompant ainsi l'unité.
Mettre un margin-top supplémentaire sur les titres pour bien segmenter les sections.

**RicardoBxl** · 16/08/2013, 22h11

Jreaux62,

T'as l'art de me faire sourire lol.

Position: absolute/relative

J'avoue que j'abuse des position: absolute. Mais est-ce si embêtant que çà ? Car dans mon bouquin il est dit que certains développeurs préféreront utiliser les float:left/right clear:both et d'autres les position: absolute/relative.

Ta remarque tu l'as fait donc en pensant surtout au Responsive Web Design ou parce que ma manière de faire est en fin de compte peu utilisé.

Maintenant je comprends très bien que ton souci est que je prenne de bonnes habitudes le plus vite possible

Fichier CSS

Pour mon fichier CSS il est clair que je dois le dépoussiérer. Il y a des choses qui doivent être supprimées et surtout je devrais regrouper ce qui va ensemble.

Mais comme une fois de plus je répondrai: "une chose à la fois"

Rodolphe,

margin-top et <strong>

J'ai appliqué le margin-top et ai retiré les <strong> des paragraphes <p>. Seuls les titres se voient dorénavant attribuer une balise <strong> pour certains mots clés.

Liens

Je les ai mis en vert et je pense que c'est plus harmonieux.

**rodolphebrd** · 16/08/2013, 22h27

Le footer ne va pas du tout

Envoyé par jreaux62

"à consommer avec modérateur" (n'est-ce pas, rodolphebrd ?

)

C'est une invitation ?

**RicardoBxl** · 16/08/2013, 23h55

Rodolphe et JReaux,

J'ai réécrit la page Web Development et ai crée la page SEO (en français uniquement).

Pourriez-vous allez jeter un oeil et me dire si la manière de présenter les infos et le code associé (des div et p plutôt que des ul li) est correct.

Dernière chose Je n'arrive pas à placer les div les unes en dessous des autres.
Pourtant j'ai fait un float:left pour que chacune se suive et quand on arrive au bout du conteneur parent j'aurais pensé que le div suivant serait venu en dessous de celui du dessus.

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
#WebDev{
display:inline-block;
height:200px;
}
 
.WebDev{
float:left;
margin-left:10px;
margin-bottom:20px;
width:150px;
}
 
.WebDev h4, .SEO h4{
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);
}

Le footer : Je m'en occupe demain matin

**rodolphebrd** · 17/08/2013, 00h30

1 - remettre les éléments dans le flux:

Code css :

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

1
2
3
4
5
#WebDev:after{
  content:"";
  display:block;
  clear:both;
}

2 - placer un clear:left; à mi-parcours:

Code html :

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

1
2
<div style="clear:left;" class="WebDev" id="WebDevOG">
<h4>Outils graphiques</h4>

http://codepen.io/maxwbailey/pen/qCBKk

**RicardoBxl** · 17/08/2013, 01h02

Rodolphe,

J'ai appliqué ta solution mais ca marche à moitié on va dire.

Une image vaut mieux que des mots:

code:

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
#WebDev:after{
  content:"";
  display:block;
  clear:both;
}
/*
display:inline-block;
height:200px;
*/
.WebDev{
float:left;
margin-left:10px;
margin-bottom:20px;
width:160px;
}
.WebDev h4, .SEO h4{
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);
}

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
<h2>Espace IT</h2>
	<h3>Compétences en développement web</h3>
      <div id="WebDev">
		<div class="WebDev" id="WebDevLanguages">
			<h4>Langages</h4>
				<span>html5</span><br>
				<span>css3</span><br>
				<span>Javascript (DOM)</span><br>
				<span>php</span>
		</div>
		<div class="WebDev" id="WebDevFTPClient">
			<h4>FTP Client</h4>
		         	<span>FileZilla</span>
		</div>
 
		<div class="WebDev" id="WebDevEDI">
 
			<h4>Outils de développement (EDI)</h4>
 
				<span>Eclipse</span><br>
				<span>Notepad++</span>
 
		</div>
 
		<div class="WebDev" id="WebDevOG">
 
			<h4>Outils graphiques</h4>
 
				<span>GIMP (Traitement d'images)</span><br>
				<span>Photo filtre (Retouche photos)</span>
 
		</div>
 
		<div style="clear:left;" class="WebDev" id="WebDevSL">
 
			<h4>Serveur local</h4>
 
				<span>Apache 2.2.22</span>
 
		</div>
 
		<div class="WebDev" id="WebDevDataBase">
 
			<h4>Base de données</h4>
 
				<span>MySQL</span>
 
		</div>
 
	</div>

**rodolphebrd** · 17/08/2013, 08h29

Si tu as compris ce que je t'ai donné, cela devrait suffire amplement :

Code css :

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

1
2
3
#WebDevOG {
    clear: left;
}

Invité · 17/08/2013, 08h48

Envoyé par RicardoBxl

J'ai appliqué ta solution mais ca marche à moitié on va dire.

Tant que tu n'auras pas compris qu'il faut revoir entièrement le code html/CSS, tu te contenteras de bricoler...

Une maison a besoin de fondations solides.
A quoi bon remplacer les fenêtres ou poser un plancher, si le bâtiment risque de s'écrouler ?
Toi, ce que tu fais, c'est "cacher la misère" avec du papier peint ou quelques planches clouées !

Envoyé par RicardoBxl

J'avoue que j'abuse des position: absolute. Mais est-ce si embêtant que çà ?

Je pense que tu t'en rendras compte quand tu voudras rendre ton site "adaptable", ou "responsive".

"adaptable" : dimensions avec des valeurs en %.
"responsive" : qui s'adapte "en plus" au media (mise en page, taille des polices,...)

**RicardoBxl** · 17/08/2013, 14h09

JReaux,
Je comprends.

La preuve en est que j'ai commencé à réécrire mon code.

Le footer par exemple a été réécris comme cela dans mon CSS:

Code css :

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

1
2
3
4
5
footer{
	clear:both;
	margin-left:0px;
	margin-top:50px;
	width:1100px;

La sectionleft:

Code css :

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

1
2
3
4
5
.SectionLeft{
	position:relative;
	float:left;
	width:180px;
	height:280px;

La sectioncenter

Code css :

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

1
2
3
4
5
6
#SectionCenter{
	position:relative;
	width:700px;
	min-height:360px;
	margin-left:200px;
	color:#000000;

Le fait d'indiquer position:relative pour SectionLeft et SectionCenter me permet ensuite de placer via position:absolute à un endroit précis de ces sections une image ou un div.

C'est quand-même propre comme çà non ?

Exemple l'image du CV téléchargeable. Je le place en absolute dans le container parent SectionCenter.

Code css :

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

1
2
3
4
5
#Image_CV_Download{
position:absolute;
top:-10px;
left:120px;
}

Sans doute le problème vient du fait que vous en tant que gars expérimentés vous maîtrisez mieux l'aspet % pour les tailles et pensez Responsive.

L'utilisation des % est encore assez flou pour moi et par extension le Responsive.

Ce week-end, je vais nettoyer mon code CSS et revoir la manière de présenter le contenu.

J'ai déjà fait un premier travail là-dessus:

Exemple comparatif:
Code réécrit pour la page Web avec des <div> et <p>.
Conseillé si je ne m'abuse pour googlebot et donc le référencement.

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
<h2>Espace IT</h2>
 
	<h3>Compétences en développement web</h3>
 
	<div id="WebDev">
 
		<div class="WebDev" id="WebDevLanguages">
 
			<h4>Langages</h4>
 
				<span>html5</span><br>
				<span>css3</span><br>
				<span>Javascript (DOM)</span><br>
				<span>php</span>
 
		</div>
 
		<div class="WebDev" id="WebDevFTPClient">
 
			<h4>FTP Client</h4>
 
				<span>FileZilla</span>
 
		</div>
 
		<div class="WebDev" id="WebDevEDI">
 
			<h4>Outils de développement (EDI)</h4>
 
				<span>Eclipse</span><br>
				<span>Notepad++</span>
 
		</div>
 
		<div style="clear:left;" class="WebDev" id="WebDevOG">
 
			<h4>Outils graphiques</h4>
 
				<span>GIMP (Traitement d'images)</span><br>
				<span>Photo filtre (Retouche photos)</span>
 
		</div>
 
		<div class="WebDev" id="WebDevSL">
 
			<h4>Serveur local</h4>
 
				<span>Apache 2.2.22</span>
 
		</div>
 
		<div class="WebDev" id="WebDevDataBase">
 
			<h4>Base de données</h4>
 
				<span>MySQL</span>
 
		</div>
 
	</div>

Et code non modifié de la page Profil avec <ul> et <li>

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
<h2>Espace Profil</h2>
 
<div>
 
	<ul class="Profile">
		<li>Goût du travail en équipe</li>
		<br>
		<li>Capacité à gérer un projet de A à Z</li>
		<br>
		<li>Sens de la communication</li>
		<br>
		<li>Polyvalence</li>
		<br>
		<li>Enthousiasme</li>
		<br>
		<li>Assertivité</li>
		<br>
		<li>Pragmatisme</li>
		<br>
		<li>Orienté résultats</li>
		<br>
		<li>Prise rapide de décisions</li>
		<br>
		<li>Aisance avec les chiffres</li>
		<br>
		<li>Dynamique</li>
		<br>
		<li>Esprit analytique</li>
		<br>
		<li>Soif d'apprendre</li>	
	</ul>
 
</div>