Guikingone

[TUTORIEL] Créer un site portfolio avec BootStrap [PARTIE II]

par

, 01/09/2015 à 11h00 (1615 Affichages)

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 :

L'en-tête du site
La barre de navigation
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 ...

) 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.