Forum du club des développeurs et IT Pro - Blogs - Guikingone https://www.developpez.net/forums/blogs/823648-guikingone/ Developpez.com, le Club des Développeurs et IT Pro fr Fri, 01 May 2026 04:05:46 GMT vBulletin 15 https://forum.developpez.be/images/misc/rss.jpg Forum du club des développeurs et IT Pro - Blogs - Guikingone https://www.developpez.net/forums/blogs/823648-guikingone/ <![CDATA[[DOSSIER][Être développeur ou ne pas être ?]]> https://www.developpez.net/forums/blogs/823648-guikingone/b1038/dossier-etre-developpeur-ne-etre/ Tue, 19 Jan 2016 18:08:43 GMT Aujourd’hui, je n’ai pas... Aujourd’hui, je n’ai pas envie de parler technique ou manipulation PHP, non, aujourd’hui, j’ai envie de parler de code, le vrai, le pur, le dur.
Récemment, j’ai obtenu un entretien d’embauche pour un poste de développeur Web, chouette me dis-je, mon CV intéresse les entreprises, jusqu’au moment du rendez-vous, tout me semblait bien, et puis la douche froide.

Je l’avoue, je débute dans le développement, je sais travailler, mais je manque d’expérience in situ, dans le monde stressant et envoûtant du développement en équipe, je veux découvrir ce monde, je tente de combler ce vide, car oui, je suis motivé, attentif et patient (je ne ferai pas de lettre de motivation ici, mais au besoin, mon CV vous attend sur mon profil) et j’aime ce métier de développeur (j’aime aussi les fruits et alors ?), ce métier qui me donne envie de me lever le matin, celui qui occupe mes journées en freelance, celui qui me fait faire des journées de 10H-12H 7/7 (oui, je suis comme ça) et qui me fait me coucher heureux, car j’ai résolu un souci de contrôleur.
Revenons à cet entretien, tout se passait bien puis la recruteuse m’a parlé de CMS, je connais Wordpress, Joomla, PrestaShop et j’en passe, mais je ne les utilise pas, pourquoi me direz-vous ?
La vérité est qu’à mes yeux, ces outils ne sont pas des outils de développeur (mais change de métier alors !), mais des outils de travailleur à la chaîne, pourquoi ce jugement ?

À ses débuts, Wordpress était pensé pour créer des blogs, oui, des blogs pas des applications web, le CMS a évolué et est devenu un outil polyvalent, mais est-il devenu pour autant un outil de développeur au même titre que Symfony ? Non, simplement car il n’est pas « personnel », mais bien formaté pour une utilisation standard. Là où un framework comme Symfony est conçu pour du développement « from scratch », WordPress vous fournit les fondations d’un projet, aucun intérêt à mes yeux !
Mais pourquoi ce jugement ?

Quand j’ai effectué mes mois de formations en tant que développeur Web, j’ai compris que le métier est celui de gens passionnés et méticuleux, ce métier est celui des gens qui aiment ce qu’ils font, pas celui de ceux qui « piratent » leur workflow, comment prétendre développer un site « adapté » si ce dernier est lié à un outil formaté ?
Alors oui, je le conçois, cet outil est utile, il permet de travailler plus vite et de manière « formatée » en suivant des règles, mais est-ce bien toujours du métier de « développeur » dont nous parlons ? Je ne pense pas, à mes yeux, un développeur part de zéro et est aidé dans sa progression par un ensemble de développeurs qui améliorent son workflow en s’occupant de certaines parties, prenons un exemple tout simple.

Imaginons une application web tournant sous Symfony, cette dernière peut sembler complexe, mais un développeur débutant sera capable sans soucis de développer un système de gestion de contenu (SGC et non CMS) sans effort, comment ? Simplement en utilisant les bundles, la console, Doctrine, Twig et j’en passe, la qualité finale sera la même que celle de Wordpress sauf que ce projet sera purement adapté à un besoin, si le développeur s’arrête à ce stade, tout projet utilisant Symfony pourra utiliser son SGC sans effort et de plus, il pourra le partager avec le monde entier afin que tout un chacun puisse l’améliorer et accélérer son workflow, au fond, est-ce si difficile de faire simple ?
Imaginons un site de vente en ligne qui veut un résultat sur mesure, le SGC précédemment cité pourra remplir les besoins et le développeur pourra de surcroît améliorer son application afin que les besoins du client soient matchés.
Alors, me direz-vous que cela prend du temps et qu’il faut s’y atteler, mais bon sang, pourquoi sommes-nous développeurs si une tâche aussi simple vous semble impossible ?! Pour moi, toute personne me répondant par la négative à cette invitation ne mérite pas le titre de développeur !

Alors oui, je vous vois venir, vous me direz que je n’y comprends rien et que je débute, mais je vous arrête là par une affirmation, réfléchissez-y deux secondes, pourquoi passer par un outil qui n’en est pas un, c’est comme si un cuisinier utilisant un Magimix, aucun cuisinier digne de ce nom n’utilise de Magimix, cela facilite la vie, mais au fond, celui qui aime son métier ne compte pas les heures de travail, ni celle de frustration ni l’échec, car c’est dans ce dernier que nous arrivons à la saveur même de chaque métier, celui de se dépasser, de pousser plus loin notre vision étriqué du métier que nous chérissons, car oui, mesdames, messieurs, j’aime ce métier et utiliser une pelle pour planter un clou ne me semble pas adapté.
Alors je conclus, je n’ai pas eu ce poste et finalement, je crois que cela n’est pas un mal, car au fond, donner le meilleur de moi-même dans un environnement qui n’est pas celui que j’affectionne me rendrait malheureux et je finirais par rogner sur la qualité de mon travail, au fond, je dois bien l’avouer, je suis méticuleux, attentif, patient, rigoureux et passionné, mais plus que cela, j’aime ce que je fais et cela n’a pas de prix. ]]> Guikingone https://www.developpez.net/forums/blogs/823648-guikingone/b1038/dossier-etre-developpeur-ne-etre/ <![CDATA[[TUTORIEL] Créer un site portfolio avec BootStrap [PARTIE II]]]> https://www.developpez.net/forums/blogs/823648-guikingone/b711/tutoriel-creer-site-portfolio-bootstrap-partie-ii/ Tue, 01 Sep 2015 09:00:54 GMT Bonjour à tous, Bienvenue... Bonjour à tous,

Bienvenue dans la partie II du tutoriel "Créer un site Portfolio avec BootStrap", avant d'aller plus loin, je vous encourage à lire et relire le billet précédent, une piqûre de rappel ne fait pas de mal ;).

Vous êtes prêts ? Allons-y !

Dans cette seconde partie, nous nous intéresserons à la page A Propos, si le déroulé de ce tutoriel vous semble confus, il n'en est point, nous commençons par les points importants d'un portfolio pour finir sur les pages "secondaires".
Au cours de ce billet, nous verrons :

  • Comment créer un CV interactif
  • Comment mettre en avant ses compétences
  • Partager ses idées
  • Créer un design responsive sobre
  • Conserver notre ligne directrice


Vous l'aurez compris, la somme de travail est conséquente, lançons nous dés maintenant.

I - Penser à son design

Vous l'aurez compris, le design fait encore partie de ce billet, ici, outre les phrases philosophiques, ce sont les lignes directrices qui nous intéressent, nous allons repartir sur le design précédent et l'appliquer à un site responsive qui mette en avant notre CV (via un téléchargement) en le rendant interactif et en mettant en avant nos idées/compétences/acquis, tout ce qui pourrait intéresser un employeur, nous créerons aussi une redirection depuis l'index sur cette page et nous ajouterons notre photo pour finaliser le tout.

II - Se remettre dans le bain

Le billet précédent vous semblez fluide et agréable ? Ce billet se basera sur les mêmes bases, le code HTML sera toujours complété par son code CSS, si vous vous demandez où sont les promesses faites dans le billet précédent, rassurez-vous, un billet viendra conclure toute vos questions.

Prêt ?

Dans un premier temps, il convient de créer la page suivante, nous allons donc créer une page nommée Propos.html (on évitera les symboles farfelues pouvant survenir ...), au sein de cette page, nous allons copier le code essentiel à savoir :

  1. L'en-tête du site
  2. La barre de navigation
  3. La partie des scripts


Voici donc le code :

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
<!doctype html>
<html class="no-js" lang="fr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Loulier Guillaume - Freelance</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->
 
		<!-- BootStrap Core -->
		<link href="css/bootstrap.css" rel="stylesheet">
 
		<!-- Custom style -->
		<link href="css/main.css" rel="stylesheet">
		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
 
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
 
		<!-- Old Browser -->
		<!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    </head>
 
    <body>
 
		<!-- Navbar -->
		<div class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle Navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="index.html">Loulier Guillaume - Freelance</a>	
				</div>
				<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav navbar-right">
						<li><a href="index.html">Home</a></li>
						<li><a href="#Blog.html">Blog</a></li>
						<li><a href="#Portfolio.html">Portfolio</a></li>
						<li><a href="#Propos.html">A Propos</a></li>
						<li><a href="#Contact.html">Contact</a></li>
					</ul>
				</div>
			</div>
		</div>
 
	<!-- Script Javascript -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
		<script src="js/bootstrap.js"></script>
 
        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='https://www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script>
    </body>
</html>

Vous noterez surement que mon code a changé très légèrement depuis la partie précédente, j'ai ajouter un lien supplémentaire et mis en place mes liens, cela me permet de gagner du temps par la suite, à ce stade, vous devriez obtenir un résultat similaire au mien.

Ceci étant fait, nous allons créer nos premières ébauches de design, je suis volontairement parti sur un design "flat" (je n'aime pas ce terme ... :no:) afin de rendre le tout plus "sobre", nous allons créer un en-tête sous la barre de navigation afin de centrer la vue du visiteur sur la suite, nous ajouterons une image et du texte le tout suivi par un bouton permettant de télécharger notre CV (à venir).

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
<!-- A Propos -->
		<div id="propos_hub">
			<div class="container">
				<div class="row">
					<h3>Un peu de lecture ?</h3>
				</div>
			</div>
		</div>
 
		<div class="container propos">
			<div class="row">
				<div class="col-lg-6">
						<img class="img-responsive" src="img/mac_coffee_1024.jpg" alt="#">
				</div>
				<br/>
 
				 <div class="col-lg-6">
					<h4>Se dévoiler</h4>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
 
					<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 
		 			<p>Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
					 <p><br/><a href="#Contenu/CV.zip" class="btn btn-theme">Télécharger mon CV</a></p>
				  </div>
			</div>
		</div>

Comme d'habitude, le code CSS qui vient achever cette zone :

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
 
/* =========== Style Propos.html ========== */
 
#propos_hub {
	background: #FCAC45;
	margin-top: 60px;
	margin-bottom: 60px;
	padding-top: 25px;
	padding-bottom: 25px;
}
 
#propos_hub h3 {
	color:white;
	margin-left: 18px;
}
 
#propos {
	margin-top: 80px;
	margin-bottom: 80px;
}

A noter que je sépare le code de la page Propos en ajoutant des signes "=", cela permet une lecture plus rapide et fluide de mon code si je doit intervenir par la suite.

J'ai volontairement créer une zone de texte en vue de me présenter, l'image n'a pas d'importance particulière, elle n'est là que pour donner un ton à la page, la photo d'identité viendra par la suite.

Nous voici arriver à la zone tant attendu, la mise en avant des compétences, dans cette zone, nous allons mettre une photo d'identité (certains peuvent trouver cela discriminatoire, ce que je soutient, pour ce passage, libre à vous d'en mettre une ou pas, le choix vous appartient) et nos compétences en avant notamment via le biais de "progress bar animée", cela aura l'avantage de pouvoir aider le visiteur à nous situer sur une ligne de compétences qu'il souhaite, malgré le fait que vous pouviez penser à JS pour animer le tout, nous n'écrirons pas une seule ligne JS sur cette zone, BootStrap se charge de tout via ses fichiers pré-existants.

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
<!-- Compétences -->	
		<div class="container">
			<div class="row">
				<div class="col-lg-6">
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
				</div>
				<br/>
				<div class="col-lg-6">				
					<h4>Compétences</h4>
					<br/>
					<h5>Web design</h5>
					<div class="progress">
						<div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="60" style="width: 60%">
							<span class="sr-only"></span>
						</div>
					</div>
					<br/>
					<h5>HTML/CSS</h5>
					<div class="progress">
						<div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="60" style="width: 60%">
							<span class="sr-only"></span>
						</div>
					</div>
					<br/>
					<h5>BootStrap</h5>
					<div class="progress">
						<div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="50" style="width: 50%">
							<span class="sr-only"></span>
						</div>
					</div>
					<br/>
					<h5>JavaScript</h5>
					<div class="progress">
						<div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="10" style="width: 10%">
							<span class="sr-only"></span>
						</div>
					</div>
					<br/>
					<h5>Infographie 3D (Blender)</h5>
					<div class="progress">
						<div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="55" style="width: 55%">
							<span class="sr-only"></span>
						</div>
					</div>
					<br/>
					<h5>Infographie 2D</h5>
					<div class="progress">
						<div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40" style="width: 40%">
							<span class="sr-only"></span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<br/>
		<br/>

Pour cette zone, le code CSS n'est pas fourni car il n'y en a pas ;).
Vous remarquerez que j'ai encore ajouté une ligne de texte, cela peut servir à expliquer de manière plus concise vos compétences mises en avant, cela fournira un plus non négligeable qui pourrait faire la différence lors d'un entretien.

Nous allons maintenant aller plus loin dans le CV interactif en ajoutant nos valeurs personnels, nos buts et nos activités annexes, cela permettra au visiteur d'en savoir plus sur nous sans les fioritures.

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
<!-- Informations -->
		<div id="f_Propos">
		<div class="container">
			<div class="row">
				<div class="col-lg-4">
					<h3>Valeurs</h3>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
				</div>
				<div class="col-lg-4">
					<h3>Buts</h3>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
				</div>
				<div class="col-lg-4">
					<h3>Activités</h3>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
				</div>
			</div>
		</div>
		</div>
		<br/>
		<br/>

Nous allons modifier le style de la page afin de créer une coupure dans la page et montrer que nous passons à autre chose :

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
#f_Propos {
	background: #384452;
	padding-top: 70px;
	padding-bottom: 70px;
	text-align: center;
}
 
#f_Propos h3 {
	color: white;
	font-size: 22px;
	font-weight: 450;
}
 
 
#f_Propos p {
	font-size: 20px;
	color: #f2f2f2;	
}

A la suite de cette section, nous entrons dans la formations reçu et les expériences professionnelles, un morceaux important.

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
<!-- Formations -->
		<div class="container">
			<div class="row">
				<div class="col-lg-6">
					<h3>Mon Education</h3>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
				</div>
				<div class="col-lg-6">
					<h3>Intégrateur Web</h3>
					<h4>Open Classrooms</h4>
					<button type="button" class="btn btn-theme" href="#">94%</button>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
					<br/>
					<h3>Intégrateur Web</h3>
					<h4>Open Classrooms</h4>
					<button type="button" class="btn btn-theme" href="#">94%</button>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
					<br/>
					<h3>Intégrateur Web</h3>
					<h4>Open Classrooms</h4>
					<button type="button" class="btn btn-theme" href="#">94%</button>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
				</div>
			</div>
		</div>

Voici pour les expériences :

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
<!-- Expériences -->
		<div class="container">
			<div class="row">
			<div class="col-lg-6">
					<h3>Mes Expériences</h3>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
			</div>
			<div class="col-lg-6">
					<h3>--_--</h3>
					<h4>--_--</h4>
					<button typ="button" class=" btn btn-theme">Du -- au --</button>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
					<br/>
					<h3>--_--</h3>
					<h4>--_--</h4>
					<button typ="button" class=" btn btn-theme">Du -- au --</button>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
					<br/>
					<h3>--_--</h3>
					<h4>--_--</h4>
					<button typ="button" class=" btn btn-theme">Du -- au --</button>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
					<br/>
				</div>
			</div>
		</div>

Vous remarquerez que le code ne diffère que très peu (un changement pour le bouton), cela permet d'assurer un chargement rapide et fluide de la page, surtout lorsque nous ajouterons du JS.
Il n'y a pas de code CSS pour cette partie, la page chargera le style par défaut qui me convient, si vous souhaitez en ajouter, libre à vous de le signifier à la suite du code précédent.

Nous en avons fini avec la page A propos, le contenu important est là et résume notre profil, à ce stade, il peut être intéressant de rendre la page imprimable via un script, cela permettrai de fournir un CV supplémentaire tiré de votre site et rendrai le tout "interactif, de par l'aspect "technique" de la manoeuvre et dans l'optique de ne pas perdre les personnes que cela n'intéresse pas, le tutoriel sera fourni dans un billet suivant.

A ce stade, votre site fonctionne toujours correctement en local et se présente plutôt bien, nous possédons l'index et la page A propos, cela devrait déjà vous donner satisfaction ;) (si non, vous pouvez relire le tutoriel et modifier les valeurs souhaitées), nous allons maintenant nous diriger vers le portfolio afin de mettre en avant vos travaux, le gros du travail reste simple si vous restez concentré, le travail abattu à la fin de ces tutoriels peut vous sembler massif mais il n'en est rien, le code se répète souvent et les scripts/classes embarquées de BootStrap permettent d'aller plus vite et plus directement à l'objectif, n'hésitez pas à commenter et poser vos questions afin de recevoir de l'aide.

Bonne journée. ]]> Guikingone https://www.developpez.net/forums/blogs/823648-guikingone/b711/tutoriel-creer-site-portfolio-bootstrap-partie-ii/ <![CDATA[[TUTORIEL] Créer un site portfolio avec BootStrap]]> https://www.developpez.net/forums/blogs/823648-guikingone/b706/tutoriel-creer-site-portfolio-bootstrap/ Mon, 31 Aug 2015 09:31:38 GMT Bonjour à tous, Dans ce... Bonjour à tous,

Dans ce billet, je vais vous montrer la création d'un portfolio / site d'agence / site divers et sera crée en vue d'un affichage responsive via le Framework BootStrap de l'équipe Twitter.

Dans un premier temps, nous penserons au design du site puis nous passerons au code HTML et CSS propre au site, nous effectuerons des modifications précises et ajouterons des styles personnels en vue de créer un look simple, efficace et porté vers un site sobre, dans ce dossier, les connaissances nécessaires sont :

  • Connaître les bases de HTML5 et CSS3
  • Posséder BootStrap : BootStrap
  • Savoir créer un design depuis zéro
  • Avoir des notions en responsive design
  • Etre patient !


Commençons tout de suite avec la réflexion autour du menu.

I - Créer son design propre

Dans la jungle des sites web actuels, chacun devrait se démarquer, tout le monde veut attirer le plus de monde et créer l'expérience la plus complète et souple pour l'utilisateur final, en tant qu'Intégrateur Web, notre travail est de suivre un cahier des charges établi en fonction des demandes du client mais dans l'optique d'un site personnel ou d'un site d'agence, les demandes deviennent plus personnels et différencier le bon du mauvais devient plus difficile, c'est là qu'intervient ce que j'appelle la mise à plat du projet.

A - Mettre à plat le projet

Mettre à plat le projet revient (à mes yeux) à se donner des lignes directrices, un cahier des charges précis, bref, une ligne de conduite.

  1. Notre site doit-il être responsive ? De nos jours, un site classique (non-responsive) n'est pas acceptable, c'est un fait, avec l'arrivée des supports mobiles (tablettes, smartphones, smarwatches, etc ...), les utilisateurs veulent une expérience pensée pour leur support.
  2. Notre site doit-il se tenir sur une page complète où proposer des sections ? Là encore, tout est affaire de préférence, un site sur page complète (terme personnel) qui se tient sur une seule page est à privilégier si le design le permet, un site en sections (sur plusieurs pages PHP ou HTML) est plus adapté dans le cas d'un site d'informations avec des forums, une section membre, un blog, etc ...
  3. Notre site doit-il comporter des codes couleurs ou des logos spécifique ? L'identité d'un site passe par ses couleurs, son logo, sa typographie, ses visuels accrocheurs, ses fonctionnalités, bref tout ce qui peut créer l'envie chez le client de visiter encore et encore votre site.


Vous l'aurez compris, mettre à plat le projet permet de répondre à la majorité des questions que l'on se pose au prémices de la création de notre site, en clair, commencer par réfléchir avant d'agir et agissez en ayant poser vos bases de création, la suite n'en sera que plus facile.

B - Devenir son propre designer

De nos jours, bien des studios payent des designer afin de créer la charte graphique d'un site, au fond, ce comportement dénote un soucis majeur, les personnes censés créer le design du site n'en sont pas capable matériellement, le designer intervient en complément de capacité, là où une personne sachant coder et designer un site proposera des compétences clés et liées afin de faciliter et accélérer le processus de création.

Au fond, avez-vous besoin de savoir créer un design de A à Z ? Oui.

A mes yeux (propos personnel), un Intégrateur Web ou un développeur front-end ne sachant pas se servir d'outils comme Photoshop/Gimp voir même un simple cahier avec un crayons ne gagnera pas toujours face à quelqu'un sachant le faire. La questions suivante est le support de travail, dois-je utiliser PS/Gimp ou utiliser un bon vieux cahier ? Là encore, tout est question de préférence, même si personnellement je suis plus doué et créatif sur un cahier, certains le seront via PS/Gimp, d'autres le seront sur des support comme Racontr ou d'autres médias de création en ligne, choisissez votre voie et creuser jusqu'à sortir le meilleur de vous même, là réside le secret.

Si je peux me permettre un avis sur la création en soi, je dirais qu'il ne faut pas hésiter à se tromper volontairement, créer des choses farfelues et sans fondements techniques, l'idée de créer quelque chose de plus complexe vous poussera à dépasser les limites que vous vous fixer quotidiennement, soyez fou, visez l'impossible, comme le dit la routine, tout le monde pensait que c'était impossible jusqu'à qu'il le rende possible !

II - Se lancer dans la programmation

Vous avez poser le projet ? Vous avez créer votre design ?

Lançons nous dés maintenant dans le vif du sujet, les mains de le cambouis, l'aspect manuel du projet, l'écriture de notre code.

Dans cette partie (plus longue que le reste), je vous détaillerais mon processus de création, mes outils de travail quotidien et ma vision de l'écriture, libre à vous de suivre ou de vous démarquer.

A - Utiliser un template HTML

A mes yeux, je ne comprend pas l'intérêt de créer un template HTML quand l'internet moderne nous permet de fluidifier et d'accélérer notre travail, dans ce projet, j'utiliserais HTML5 Boilerplate, un template HTML comportant tout les outils nécessaires à la mise en place rapide d'un projet, que vous téléchargiez le template basique ou que vous décidiez d'y intégrer BootStrap, libre à vous de choisir le chemin que vous parcourez par la suite.

B - BootStrap

Dans de dossier, BootStrap sera notre outil principal, pour ceux qui veulent jouer les baroudeurs :massacre:, libre à vous de choisir le framework que vous préférez, à mes yeux (et je rêve encore de ce jour béni des dieux où les idées des uns et des autres se verront rassemblées), BootStrap est l'outil parfait pour créer un contenu puissant et responsive, Foundation est l'outil des gens qui aiment le challenge et Javascript, sa syntaxe est plus claire et précise (une barre se nomme topbar, une rangée = row et une colonne = columns mais j'y reviendrais) que BootStrap mais sa mise en forme et son adaptation au créateur plus complexe, bref, là encore soyez différent, pensez utile et choisissez l'outil qui vous convient.

Pour téléchargez BootStrap, cliquer sur le bouton Télécharger et choisissez BootStrap, vous obtiendrez l'intégralité des fichiers nécessaire à ce stade et serez en mesure de commencer à lire la suite.

C - Commencer

Vous avez tout ? Commençons.

Avant de commencer à écrire quoi que ce soit, il nous faut nous assurer que les outils sont correctement assemblés, pour cela, nous allons créer un dossier en local (ou sur un service Cloud, ma préférence car cela me permet de travailler de n'importe où sans soucis de données) et y copier les dossiers décompressés de HTML5 Boilerplate et BootStrap. Une fois ceci effectué, nous allons ouvrir le dossier HTML5 et voir ce qui s'y cache.

Nom : I.PNG Affichages : 3085 Taille : 36,6 Ko

En l'état actuel, le dossier comporte la structure osseuse de notre site, le fichier index.html sera notre page d'accueil (assurez-vous de la conserver comme tel avec ce nom, une fois en ligne, le serveur chargera cette page en premier !), le dossier CSS comprendra nos fichiers CSS de BootStrap ainsi que ceux plus personnels liés à du style ajouté, img contiendra les images, js les fichiers Javascript, le reste est assez simple à comprendre, les fichiers .git-- servent sur GitHub et Git, le reste sert les configurations plus avancées comme la réservation de domaine, les icônes de favoris, etc ...

Prenons maintenant le dossier BootStap.

Nom : II.PNG Affichages : 2862 Taille : 6,0 Ko

C'est petit ? C'est tout à fait normal, à ce stade, vous obtenez la version "rapide" de BootStrap, si vous voulez obtenir le code complet, il vous faudra le choisir sur la page de Downloads (ce qui sera expliqué plus bas dans le dossier) mais rassurez-vous, avec tout ceci, vous obtenez tout voir plus que nécessaire pour travailler correctement, là encore, les dossier s'expliquent par eux-mêmes, CSS contient le style, JS les fichiers Javascript, Fonts contient les familles de polices personnalisées (ou pas).

Maintenant que tout est là, faisons les ajustements nécessaires, dans un premier temps, ouvrez les pages scindées en deux sur votre bureau et copier les dossiers CSS et JS dans votre dossier HTML5 crée plus tôt, si votre OS vous demande quoi faire, cliquer sur fusionner, pour le dossier fonts, faite de même, ce dernier ne sera pas à fusionner vu qu'il est seul.

Nom : III.PNG Affichages : 3010 Taille : 38,4 Ko

Voici le résultat final de vos changements.

D - Se lancer dans le vif du sujet

Il est l'heure, l'heure est arrivé amis du bon goût, lançons nous dans le vif du sujet, le travail tant attendu, mais au fait, que faire ?

Dans un premier temps, je me doute que vous utilisez un éditeur de texte tel que Notepad ++, Brackets, Sublim, etc ... Pour ma part et par choix personnel, j'utilise Brackets, ce dernier comprend des outils qui me facilitent le travail notamment l'aperçu en direct du travail, le scindage de mon écran lorsque je travaille sur du HTML et du CSS, bref, je ne vous vend pas le produit mais vous explique mon choix et ce que vous verrez à l'écran.

Ouvrez votre éditeur ou ouvrez le fichier via clic droit => Votre éditeur et regardons ce que nous obtenons.

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
<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->
 
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
 
        <!-- Add your site or application content here -->
        <p>Hello world! This is HTML5 Boilerplate.</p>
 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
 
        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='https://www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script>
    </body>
</html>

Des arrangements d'ordre visuel sont à faire, des lignes sont à ajoutés dans Head et nous devons ajouter un titre ainsi que les fichiers JS à notre code.

Dans un premier temps, il convient de déclarer le fichier CSS de BootStrap, pour cela, vous avez deux choix, soit vous déclarez un serveur MaxCDN qui héberge le fichier (plus pratique sur un site publié) soit vous déclarez le fichier directement, dans ce dossier, nous utiliserons la seconde méthode, plus facile lors de la création, lors de la publication, vous pourrez passer via MaxCDN (ce qui sera expliqué plus loin), voici donc ce que nous allons ajouter dans <head>.

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
 
           <!-- BootStrap Core -->
       <link href="css/bootstrap.css" rel="stylesheet">
 
           <!-- Custom style -->
           <link href="css/main.css" rel="stylesheet">
           <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
 
<!-- Bas de page -->
 
<!-- Script Javascript -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
		<script src="js/bootstrap.js"></script>

Cela aura pour effet de signaler à notre fichier HTML où aller chercher le style CSS, à noter qu'une version min.css existe, cette version convient mieux à l'utilisation sur site publié, c'est une version "minifié" de la feuille de style, plus rapide à charger.

Nous avons aussi déplacer le code relatif aux anciens navigateurs dans <head> et ajouter un titre dans <title> afin de compléter le tout, nous ajoutons aussi le chargement des icônes FontAwesome pour ajouter de la vie à notre site via MaxCDN (ce qui permet un chargement rapide et sans faute).
Ajoutons à cela le chargement de Bootstrap.js qui permet de finaliser le code Javascript pour la page, un must à ce stade !

E - Se lancer dans l'inconnu

Tout est en place, il faut se lancer, allons-y, avant quoi que ce soit, le style que je vous présente ici est personnel, il est le résultat que je veux obtenir, libre à vous de l'adapter selon votre design voulu (que vous avez surement crée plus haut).
Tout au long de ce dossier, je vous présenterai le code puis vous expliquerai ce qu'il en retourne, n'hésitez pas à poser des questions dans les commentaires si quoi que ce soit ne marche pas comme voulu !
L'ordre de travail est le suivant, pour chaque ligne "balise" de code HTML ajoutée, vous trouverez le code CSS à la suite, cela vous permet de voir directement le résultat de votre travail, encore une fois, n'hésitez pas à modifier le code au besoin.

Pour le code CSS, nous avons déclarer le fichier main.css dans la section <head>, ce fichier contiendra tout notre code css ajouté : les classes ajoutées, les modifications de boutons, barres, etc ... N'hésitez pas à l'ouvrir à côté de vous, vous y serez souvent ! ;)

En parlant de CSS, commençons petit et écrivons nos premières lignes (roulementdetambours!) au sein de main.css, la zone où vous écrirez est balisé comme ceci : Author's custom styles, commençons.

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
/* Style Global */
 
* {
	margin: 0;
	padding: 0px;
}
 
body {
	background: #ffffff;
	margin: 0;
	height: 100%;
	color: #384452;
	font-family: sans-serif;
	font-weight: 400;
}
 
h1, h2, h3, h4, H5, H6 {
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
}
 
p {
	padding: 0;
	margin-bottom: 12px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	color: #384452;
	margin-top: 10px;
}
 
img {
	height: auto;
	max-width: 100%;
}
 
a {
	padding: 0;
	margin: 0;
	text-decoration: none;
	-webkit-transition: background-color .4s linear, color .4s linear;
	-moz-transition: background-color .4s linear, color .4s linear;
	-o-transition: background-color .4s linear, color .4s linear;
	-ms-transition: background-color .4s linear, color .4s linear;
	transition: background-color .4s linear, color .4s linear;
}
a:hover,
a:focus {
	text-decoration: none;
	color: rgba(195, 197, 198, 0.87);
}
 
::moz-selection {
	color: #fff;
	text-shadow: none;
	background: #2B2E31;
}
 
::selection {
	color: #fff;
	text-shadow: none;
	background: #2B2E31;
}
 
.centered {
	text-align: center;
}

Cela va permettre de créer les premiers signes de changements au sein du visuel, ne vous en faites pas de tout voir ou comprendre certaines modifications, les résultats arriveront dés que les classes auront été écrites au sein du fichier HTML, ici, on va modifier le background, l'apparence des paragraphe ainsi que le placement de certains éléments à venir.

Retournons sur le fichier HTML et écrivons le code nécessaire à la barre de navigation, le coeur de votre site, cette dernière sera responsive, BootStrap est pensé pour, cette dernière se fera plus petite sur mobile et doté d'un menu qui déroulera les liens via le collapse du menu.

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
		<div class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle Navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="index.html">Nom voulu de votre site</a>	
				</div>
				<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav navbar-right">
						<li class="active"><a href="index.html">Home</a></li>
						<li><a href="index.html">Blog</a></li>
						<li><a href="index.html">Portfolio</a></li>
						<li><a href="index.html">Contact</a></li>
					</ul>
				</div>
			</div>
		</div>

Cette dernière comporte un collapse du menu, des liens vers index.html (les liens seront remplacés dès la création des pages correspondantes, à noter que si vous voulez vous avancer le travail, vous pouvez écrire : #Blog.html à la place de index.html, le navigateur chargera automatiquement la page principale et vous n'aurez plus qu'à enlever le # au moment de la publication) et un lien principal qui recharge l'index, ce lien peut-être remplacé par une image (ou un logo) via <img>.

Barre de navigation crée, il nous faut y attribuer un style CSS, reprenons le fichier main.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
25
26
27
28
29
30
31
32
33
34
35
36
/* Style Navigation */
 
.navbar {
	min-height: 70px;
	padding-top: 10px;
	margin-bottom: 0px;
}
 
.navbar-brand {
	font-family: 'Raleway', sans-serif;
	font-weight: 900;
}
 
.navbar-header .navbar-brand {
	color: white;
}
 
.navbar-default .navbar-nav > li > a {
	color: white;
	font-weight: 700;
	font-size: 15px;
}
 
.navbar-default .navbar-nav > li > a:hover {
	color: rgba(172, 186, 191, 0.82);
}
 
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	color: rgba(172, 186, 191, 0.82);
	background: transparent;
}
 
.navbar-default {
	background-color: #384452;
	border-color: transparent;
}

L'idée ici est de rendre les menus semi-transparent lors du survol (d'où la couleur porté sur le transparent) et la barre bleu afin de marquer l'utilisateur (les barres blanches sont monotones, avouons-le), vous remarquerez que j'utilise une "propriété en cascade" (appellation personnel), cela me permet de créer une seule règle pour plusieurs cas de figures, joindre l'utile à l'agréable.

Passons maintenant au coeur de votre page, l'image ou le texte d'accroche, pour ma part, j'ai opter pour un mix des deux, une image montrant un travail en cours sur le site et un texte d'introduction.

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
<!-- Introduction -->
		<section id="home" name="home"></section>
			<div id="Introduction">
			<div class="container">
				<div class="row">
					<h1>Bienvenue sur mon portfolio !</h1>
					<br>
					<h3>Bonjour, mon nom est Guillaume, poursuivez !</h3>
					<br>
					<br>
					<div class="col-lg-12">
					</div>
				</div>
			</div>
			</div>

Pensez à ajouter des commentaires afin de structurer votre code.
Voici le code CSS, vous remarquerez que je préfère charger l'image de fond via le CSS, cela me semble plus logique, libre à vous de faire comme bon vous semble !

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
/* Style Introduction */
 
#Introduction {
	background: url(../img/photo-1440783335184-280994ff71a2.jpg) no-repeat center top;
	margin-top: -10px;
	padding-top: 20px;
	text-align: center;
	background-attachment: relative;
	background-position: center center;
	min-height: 700px;
	width: 100%;
 
	-webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
 
#Introduction h1 {
	margin-top: 150px;
	color: white;
	font-size: 50px;
	font-weight: 700;
}
 
#Introduction h3 {
	color: white;
	font-size: 30px;
	font-weight: 100;
	font-family: 'Raleway', sans-serif;
	font-style: oblique;
}

J'ai modifié la couleur des h1 et h3 pour se rapprocher d'un rendu neigeux (volonté personnel), le texte est centré afin de centrer l'attention.

Nous allons maintenant ajouter une session "About", cette dernière décrira rapidement quelques points importants de mon parcours ou de mes envies, une accroche supplémentaire pour un futur employeur !

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
<!-- About -->
		<section id="about" name="about"></section>
		<div id="f">
			<div class="container">
				<div class="row">
					<h3>A propos de moi</h3>
 
					<div class="col-lg-12">
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
					<p>Je suis disponible pour du travail directement</p>
					<p><button type="button" class="btn btn-warning" href="#">J'ai une offre !</button></p>
					</div>
				</div>
			</div>
		</div>
                <br>
 
		<div>
			<div class="container">
				<div class="row centered">
					<div class="col-md-4">
						<i class="fa fa-heart"></i>
						<h4>Amoureux de la technologie</h4>
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
						<p><br/><a href="#" class="btn btn-theme">En savoir plus</a></p>
					</div>
					<div class="col-md-4">
 						<i class="fa fa-flask"></i>
 						<h4>Chercher l'innovation</h4>
 						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
 						<p><br/><a href="#" class="btn btn-theme">En savoir plus</a></p>
 					</div>
 					<div class="col-md-4">
 						<i class="fa fa-trophy"></i>
 						<h4>Réussir et partager</h4>
 						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
 						<p><br/><a href="#" class="btn btn-theme">En savoir plus</a></p>
 					</div>
				</div>
			</div>
		</div>

Nous devons maintenant ajouter le style des boutons personnalisées et le style du secteur About :

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
/* Style bouton */
 
.btn-theme {
	color: #fff;
	background-color: #384452;
	border-color: #384452;
	margin: 4px;
}
.btn-theme:hover,
.btn-theme:focus,
.btn-theme:active,
.btn-theme.active,
.open .dropdown-toggle.btn-theme {
	color: #fff;
	background-color: #FCAC45;
	border-color: #ffffff;
}
 
/* Style About */
 
#f {
	background: #384452;
	padding-top: 70px;
	padding-bottom: 70px;
	text-align: center;
}
 
#f h3 {
	color: white;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 1px;
}
 
#f icon {
	font-size: 8px;
	color: #fff;
	padding: 3px;
}
 
#f p {
	font-size: 20px;
	color: #f2f2f2;
 
 
}
 
#f img {
	tex-align: center; 
}

Ceci fait, nous arrivons à une zone majeure du site, notamment quant il s'agit de site type portfolio/agence, devons nous ajouter un carousel ou une simple collection de travaux via des images ? Au fond, la décision vous revient, à mes yeux, je préfère ne pas surcharger ma page principale (notamment car c'est elle qui se charge en premier), je vais donc créer une page dédié à mes travaux en cours/passés, cela permettra au futur employeur de se sentir à l'aise lors de la consultation de mes travaux, pour "remplir" l'espace de la page, je vais mettre en avant mes compétences via le biais d'icône et de texte court et centré sur mes atouts, à l'image de la section About, cette section sera centré sur le savoir-faire et les "idées" que je véhicule.

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
<!-- Compétences -->
		<div id="Competences" class="text-center">
			<div class="container">
				<div class="section-title center">
					<h2>Un aperçu de mes compétences</h2>
					<div class="line">
						<hr>
					</div>
				</div>
				<div class="space"></div>
				<div class="row">
					<div class="col-md-3 col-sm-6 service">
						<i class="fa fa-desktop"></i>
						<h4>Web Design</h4>
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
					</div>
					<div class="col-md-3 col-sm-6 service">
						<i class="fa fa-mobile"></i>
						<h4>Mobile First</h4>
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
					</div>
					<div class="col-md-3 col-sm-6 service">
						<i class="fa fa-cloud"></i>
						<h4>Accessibilité</h4>
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
					</div>
					<div class="col-md-3 col-sm-6 service">
						<i class="fa fa-code"></i>
						<h4>Coding fan</h4>
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
					</div>
				</div>
			</div>
		</div>

Ajoutons maintenant le style relatif aux icônes et à la mise en page propre à cette section :

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
/* Compétences */
 
#Competences {
	padding: 80px 0;
}
 
.espace {
	margin-top: 40px;
}
 
#Competences i.fa {
	font-size: 40px;
	border: solid #FCAC45 4px;
	width: 100px;
	height: 100px;
	padding: 27px 25px;
	margin-bottom: 10px;
	border-radius: 50%;
	transition: all 0.5s;
}
 
#Competences i.fa.fa mobile {
	font-size: 50px;
	padding: 20px 25px;
}
 
#Competences .Service:hover > i.fa {
	background: #FCAC45;
	color: #ffffff;

J'ai crée des bords jaunes afin de créer une "surprise" et ne pas lasser le visiteur, cela permet de le garder éveillé et concentré sur la lecture.

Nous voici arrivé au footer du site, dans la logique d'un site portfolio/agence, un footer contient des liens vers les réseaux sociaux, un A propos et l'adresse du studio/de la personne, pour ma part, je préfère rediriger les visiteurs vers ma page Contact dédié à ce propos, c'est une logique pour moi, la page principale présente la personne, les autres pages approfondissent son travail et la page Contact permet de télécharger son CV, lui envoyer un mail, etc ... Libre à vous de créer un footer contenant ces attributs.

Voici le code simple que j'ai ajouté à ma page :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
<!-- Footer -->
		<div class="footer text-center">
			<div class="container">
				<div class="row">
					<div class="col-lg-12">
						<h4 class="section-title center">A propos</h4>
						<div></div>
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
					</div>
				</div>
			</div>
		</div>

Cette section ne contient pas de style CSS, cela rend la navigation plus rapide en bas de page (notamment au vu des changements apportés sur les compétences, etc ...).
A ce stade, vous devriez avoir un site fonctionnel en local, c'est le début de votre aventure à mes côtés sur ce site tout frais, dans la suite de ce tutoriel, nous verrons la création des pages annexes tel que le blog, le portfolio, la page de contact ainsi que l'ajout du Javascript (partie très utile pour la page principal !), ce tutoriel se conclût ici pour aujourd'hui, les parties suivantes sortiront rapidement ;).

Bonne journée. ]]> Guikingone https://www.developpez.net/forums/blogs/823648-guikingone/b706/tutoriel-creer-site-portfolio-bootstrap/