UVCI Année Universitaire 2018-2019

Réalisation d’un site CV monopage

responsive en HTML et CSS

PAR

Wahua Bedi Léon Paul

Projet de fin d’étude

Présenté à

Université Virtuelle de Côte d’Ivoire

En vue de l’obtention

De la licence en informatique et science du numérique

Option développement d’application et e-service

Encadreur : MANDE YAKE

Année universitaire 2018-2019

Université Virtuelle de Cote d’Ivoire, mon université partout avec moi et à tout moment.

DEDICACE

Je dédie ce travail à :

Mes chers parents, que nulle dédicace ne peut exprimer mes sincères sentiments, pour leur patience

illimitée, leur encouragement contenu, leur aide, en témoignage de mon profond amour et respect pour ses grands sacrifices.

Mes chers frères : Wahua Aimé et Wahua Paulin, pour leur grand amour et leur soutien

qu’ils trouvent ici l’expression de ma haute gratitude.

Mes chers amis qui sans leur encouragement ce travail n’aura jamais vu le jour. Et à toute ma famille et à tous ceux que j’aime.

WAHUA BEDI LEON PAUL

REMERCIEMENT

Je souhaite remercier Mr. Laurka Mathieu Kragbeu pour m’avoir permis de réaliser ce projet

et m’avoir assisté lorsque j’en avais besoin dans cette première partie. Je souhaite aussi

remercier Mr Mande Yake pour m’avoir aidé à perfectionner mon rapport tout au long de la

rédaction.

3

Table des Matières Dedicace ............................................................................................................................Remerciement…………………………………………………………………...1Liste des abréviations…………………………………………………………....3Avant-propos......................................................................................................................Introduction générale……………………………………………………………5I. Chapitre Contexte …………………………………………………………..6

Présentation.................................................................................……………….6 Qu'est-ce que un cv en ligne?...............................................................................6 Pourquoi mettre son cv en ligne?........................................................................6 L'étude d'existant……………………………………………………...6 Cahier de charges ……………………………………………………..7

II. Chapitre Conception ………………………………………………………..8

Description de la méthode……......................................................................... Introduction……………………………………………………………………8 Analyse de la conception………………………………………………………8 Qu'est-ce que un modèle de boite flexible?........................................................9 Le responsive design…………………………………………………………..9 Description et choix des outils techniques…………………………….9 Environnement de développement.....................................................................9 Environnement logiciel………………………………………………………10 Conclusion…………………………………………………………………...11

III. Chapitre Realisation............................................................................................... Introduction......................................................................................................... Présentation des interfaces…………………………………………..12 Interface de présentation………………………………………………………12 Interface de contact……………………………………………………………12 Information de contact………………………………………………………...12 Interface de formation………………………………………………………...13 Expérience professionnelle…………………………………………………...14 Compétences………………………………………………………………….14 Centre d'interet………………………………………………………………..15

Les difficultés et enseignements……………………………………..15 Difficultés……………………………………………………………………..15 Solution………………………………………………………………………..16 Enseignement tiré……………………………………………………………...16 Conclusion……………………………………………………………16

Conclusion générale.........................................................................................................Bibliographie…………………………………………………………………...27

Liste des abréviations

Mots clés

HTML : Hyper Text Markup Language

CSS : Cascading Style Sheets

PHP : Php Hypertext Preprocessor

CV : Curriculum Vitae

Avant-propos

L’université virtuelle de Cote d’Ivoire (UVCI) est une université publique ivoirienne

d’enseignement à distance, située à Abidjan.

Créer par décret n°2015-755 du 09 décembre 2015 et annoncée en septembre 2015,

l’université virtuelle est dotée d’un budget de 20 milliards de francs CFA, incluant également

l’équipement des étudiants en ordinateur et celui des universités publiques en wifi. Pour le

5

gouvernement, cette université virtuelle doit pallier le déficit de l’enseignement universitaire

en Côte d’Ivoire et la croissance importante du nombre d’étudiants. L’équipe enseignante est

composée de douze groupes de professeurs, sélectionnés après appel à projets et mettant en

place des formations en ligne ouverte à tous (MOOCs).

L’université virtuelle a montré sa capacité à tisser des liens avec des organisations d’Union

Européenne sur des sujets d’actualités et à prendre un leadership régional comme en témoigne

la cérémonie qu’elle a organisée pour distribuer des ouvrages sur l’énergie solaire aux

universités ivoirienne. En partenariat avec des entreprises informatiques tels que : CISCO ;

Microsoft ; Media soft Lafayette et Orange CI, elle offre des certifications professionnelles.

Cette a pour mission de :

Développer et vulgariser la formation à distance

Accompagner les établissements dispensant les enseignements en présentiel dans le

développement de l’offre de formation ouverte à distance

Diffuser la culture numérique

Introduction générale

Aujourd’hui, la recherche de stage ou d’emploi est devenue un problème crucial après nos

formations.

De plus, plus de 3 milliards des personnes utilisent internet de nos jours. C’est cette

croissance d’utilisateur qui incite la majorité des entreprises à être représenter sur le web et les

différents réseaux sociaux qui existent afin d’être plus compétitive sur le marché de l’emploi

ou de mieux présenter leurs produits.

Nous observons aussi les différentes offres d’emplois qui sont annoncées de plus en plus à

travers le web et les réseaux sociaux tels que Facebook, instagram, tweeter…

Partant de ce qui précède serait-il pas nécessaire de créer un site cv afin de mettre ces

différentes formations et compétences en ligne pour booster ces chances d’obtenir un emploi

ou stage ?

Pour répondre à cette problématique, nous allons créer un site CV monopage responsive en

HTML et CSS afin de se donner plus de chance d’acquérir un stage ou emploi grâce à la

visibilité que nous nous ferons sur le web.

Ce projet permettra de promouvoir nos capacités professionnelles vis-à-vis des entreprises.

Le présent rapport de projet, qui expose ce travail, est composé de trois chapitres structurés

comme suit :

Dans le premier chapitre nous présenterons le contexte qui prend en contre trois sous points qui sont :

Présenter le projet. L’étude d’existence. Le cahier de charge.

Le deuxième chapitre sera consacré à la conception du projet qui prend en contre les sous points suivants.

Présenter le problème. La technique de résolution.

Le troisième chapitre sera consacré à la réalisation du projet qui prend en contre deux

sous parties.

Les interfaces du site, le fonctionnement et la solution qu’elle apportera.

Les difficultés et enseignement tirés de ce projet.

Chapitre I : contexte

1. Présentation du projet

1-1.qu’est-ce que un cv en ligne

7

Il s’agit d’une page internet ou l’on peut retrouver toutes les informations de notre cv, mais

avec cette fois-ci la possibilité d’en dire plus sur nous, puisque nous ne sommes pas contraint

par le format A4 du cv papier classique.

1-2.pourquoi mettre son cv en ligne ?

1. C’est simple et gratuit.

2. Cela nous permettra de détailler davantage nos expériences passées ! Un cv papier ne

doit pas dépasser une page A4, et parfois pour se donner toutes les chances, on aimerait bien

dire un peu plus sur nos compétences… un cv en ligne nous donne cette chance. Il ne nous

reste plus qu’à en informer le recruteur, en donnant le lien de notre cv en ligne sur la

version papier envoyée !

3. Cela nous permettra d’améliorer notre visibilité, donc la possibilité d’être repéré et d’être

contacté.

4. Il est rapide d’actualiser dans le temps les données de ce cv.

5. Enfin, c’est le moyen de maitriser notre identité numérique, il est sans doute plus

intéressant pour le recruteur, en tapant notre nom et prénom sur internet de tomber sur une

page que nous avons créée et qui reprend plus en détail notre parcours professionnel, que de

tomber sur notre profil Facebook…

2. L’étude d’existant

Pour postuler à une offre d’emploi ou de stage, la majeure partie des personnes le font encore

physiquement de nos jours (surtout en Afrique).

Ses déplacements peuvent être inutiles et même provoquer un gaspillage de temps pour celui

qui postule et une surcharge de demandeur (celui qui postule) au sein de l’entreprise.

Vus l’accroissement des nouvelles technologies internet, cela peut se faire grâce à un site web

que dispose l’entreprise si il en existe ou le demandeur lui-même peut amener le recruteur

vers son site web qui contient son curriculum vitae.

3. Cahier des charges

Dans ce projet, nous allons créer une page complète en HTML5 et CSS3 qui sera une page de

CV. Pour cela, nous allons utiliser le flexbox, le responsive design et les éléments HTML5

structurants.

Le site représentera une seule page découpée en plusieurs parties structurées en plusieurs

sections :

Une partie appelée header qui contiendra le nom de l’auteur.

Puis six sections répartis comme suit :

• Une première section qui présentera brièvement l’auteur et les différentes

informations de contacts.

• La deuxième section contiendra les différentes expériences professionnelles de

l’auteur.

• La troisième section devra présenter les différentes formations de l’auteur ainsi

que les écoles ou il a acquérir ces formations.

• La quatrième section présentera les différentes compétences professionnelles et

personnelles de l’auteur.

• La cinquième section présentera les centres d’intérêts de l’auteur.

Et enfin la dernière partie concernera le pied de page appelé footer qui contiendra la

mention légale du cv.

Chapitre II : LA CONCEPTION

1. Description de la méthode

1-1. Introduction

9

J’expose, dans ce chapitre, la solution conceptuelle que j’ai proposée et cette conception du

système à réaliser qui a pour but de rendre flexible la tâche à la réalisation.

En d’autre terme, ce chapitre devrait répondre à la question : comment faire ? La structure de

ce chapitre dépend de la nature de ce projet.

Nous savons tous que tout système d’information nécessite des méthodes permettant de

mettre en place un modèle. Il existe plusieurs méthodes d’analyses, la plus utilisée étant la

méthode MERISE mais dans notre cas il s’agit de réaliser un site CV monopage responsive en

HTML et CSS (statique) donc pour cela nous allons utiliser le flexbox, le responsive design et

les éléments HTML5 structurants.

1-2. Analyse de la conception

Dans le cas présent, cela reste relativement simple car nous n’avons qu’une page à créer et

que nous nous contentons de n’utiliser que du HTML et du CSS.

La réflexion principale va ici se faire sur le design général de la page. Si on crée une page CV,

nous allons déjà vouloir insérer une photographie avec un paragraphe de présentation et des

informations de contact.

Ensuite, nous voudrons présenter nos expériences professionnelles, puis notre formation

académique, nos compétences et en fin nos centres d’intérêt.

Nous allons commencer avec la version mobile de notre CV qui sera la version standard. Pour

créer cette version, nous allons utiliser le modèle des boites flexibles en choisissant une

orientation en colonne principalement.

1-3.Qu’est-ce que un modèle de boite flexible ?

CSS3 introduit donc un nouveau modèle de boite en plus du modèle de boite traditionnel issu

du CSS 1 et 2. Un modèle de boite flexible permet de déterminer la façon dont des boites

sont distribuées au sein d’autres boites (horizontalement ou verticalement) et comment elles

se répartissent l’espace disponible entre elles.

Pour résumer de manière un peu simpliste, le modèle de boite flexible est exactement ce qu’il

vous faut si vous voulez réalisez des designs liquides (qui s’adaptent automatiquement à la

taille de la fenêtre du navigateur) ou élastiques (qui s’adaptent à la taille la police

typographique de l’utilisateur).

1-4.Le responsive design

Le responsive web design est une approche de conception web qui vise à l’élaboration de sites

offrant une expérience de lecture et de navigation optimales pour l’utilisateur quelle que soit

sa gamme d’appareil (téléphones mobiles, tablettes, liseuses, moniteurs d’ordinateur de

bureau).

Une expérience utilisateur « Responsive » réussie implique un minimum de

redimensionnement (zoom), de recadrage, et de défilement multidirectionnels de pages.

Le terme de « Responsive web design » a été introduit par Ethan Marcotte dans un article de

A List Apart publié en mai 2010.

Il décrira par la suite sa théorie et pratique du responsive dans son ouvrage « Responsive Web

Design   » publié en 2011. Celle-ci se limite à des adaptations cotées client (grilles flexibles en

pourcentages, image fluides et CSS3 Media Queries).

2. Description et choix des outils techniques

2-1. Environnement de développementPour développer ce site CV j’utiliserais une machine, configurée comme suit :

Machine ASUS Mémoire vive : 4GO Disque Dur : 500GO Processeur : Intel(R) Celeron(R) CPU N3060@1.60GHz 1.60GHz Type de système : système d’exploitation 64bits, processeur x64 Edition : windows 10 professionnel

2-2.Environnement logiciel

11

Lors du développement de ce site, j’utiliserais les outils suivants :

Notepad++ HTML et CSS Mozilla Firefox

Je vais présenter ces différents logiciels et langage de la section précédente :

Notepad++ : est un éditeur de texte libre générique codé en C++, qui intègre la coloration syntaxique de code source pour les langages et fichiers C, C++, Java, C#, XML, HTML, PHP, JavaScript, SQL, Objective-C, CSS, Python, et bien d’autre. Éditeur de texte "avancé" qui connaît différents langages et permet une rédaction

facilité et plus rapide.

Figure 1 : Notepad++

Mozilla Firefox : est un navigateur web libre et gratuit, développé et distribué par la Mozilla Fondation avec l'aide de milliers de bénévoles, grâce aux méthodes de développement du logiciel libre/open source et à la liberté du code source.

Figure 2 : Mozilla Firefox

HTML5/CSS3 : est un langage de base pour la création de site internet, il sert à structurer vote document. D'autre langage peuvent s'ajouter lors de la conception, mais tous les sites web contiennent du HTML

Langage essentiel dans le développement web. Constitue le corps des pages.

Figure 3 : HTML & CSS

3. Conclusion

La partie conceptuelle est une étape fondamentale pour la réalisation de n’importe quel projet.

Elle permet de faciliter le développement de tout projet informatique. Par la suite nous

passerons à la réalisation proprement dite de notre site.

Chapitre III : La Réalisation

1. Introduction

13

Ce chapitre a pour objectif majeur de présenter le produit final. C’est la phase de la

réalisation de ce site CV. Ce chapitre est composé de deux parties :

La première partie présente les interfaces du site, la solution apportée alors que la

seconde partie concerne les difficultés et les enseignements tirés.

2. Présentation des interfaces

2.1 Interface de présentationCette partie consiste à une brève présentation de l’auteur ainsi que le statut

actuel de l’auteur avec une possibilité de télécharger le CV de l’auteur au format

PDF.

2-2. Information de contact

Cette partie donne les différents contacts de l’auteur auquel on peut le joindre

ainsi que son nom à l’état civil.

2-3.Interface de formation

Elle consiste à présenter les différentes formations de l’auteur ainsi que les

écoles ou il a acquérir ces différentes formations. Elle consiste également à

guider le recruteur (visiteur) sur le type d’employer il recherche.

15

2-4.Expériences professionnellesCette partie consiste à montrer les expériences professionnelles de l’auteur, les entreprises avec les quelle il a travaillé.

2-5.Compétences

C’est la partie qui consiste à montrer les différentes compétences de l’auteur du

coté professionnelles et personnelles.

2-6.Centre d’intérêt

Elle montre les différents l’oasis auquel l’auteur prend part ou pratique le plus

souvent et montre aussi le pied de page du site qui contient la mention légale du

site.

3. Les difficultés et enseignements

3-1.DifficultésCe projet présente une difficulté dans la mesure où le visiteur voudra laisser un

commentaire à l’auteur ou voudra interagir directement avec la page, cela ne

sera pas possible pour l’instant vu que c’est un site.

17

3-2.SolutionPour gérer ce problème cité plus haut, nous aurons besoins d’ajouter un autre

langage comme le PHP qui viendra compléter le HTML et CSS afin de rendre

notre page plus dynamique avec les visiteurs qui voudraient directement

interagir avec celle-ci.

3-3.Enseignement tiré

L’enseignement tiré de ce projet réside dans la mesure où l’auteur aura plus de

visibilité sur le marché de l’emploi car une fois le CV en ligne, il pourra être

visible par tout le monde (entreprise). Pour ma part tout(e) informaticien ou

personne enquête d’emploi devrait avoir son CV en ligne afin de booster plus

ces chances d’être repérer par une entreprise ou structure.

4. Conclusion

La partie de la réalisation détermine une idée plus claire sur les taches qui sont réalisées dans

ce site web par la présentation des interfaces ou parties de la page web.

Enfin avec ce chapitre je termine la phase de développement de ce site.

Conclusion générale

Ce projet de fin d’étude consiste à concevoir un site CV monopage responsive en HTML et

CSS qui permet de mettre en ligne les compétences et formations d’une personne enquête

d’emploi ou afin de valoriser son savoir.

Pour concevoir ce travail j’ai présenté premièrement le cadre de ce projet, puis j’ai analysé

l’étude de l’existant.

En second temps, j’ai montré la phase de la conception.

Finalement, j’ai traité toutes les phases nécessaires à la réalisation de ce site CV, et dans cette

phase j’ai montré ma capacité de manipuler ces deux langages qui sont le HTML et le CSS.

Par ailleurs, des améliorations pourraient être apportées à ce site par exemple dans le cas

d’une réelle utilisation.

Enfin, la réalisation de ce projet de travail sur une durée limitée est un bon entrainement pour

notre future vie professionnelle.

19

Code source de notre page CV

21

23

25

27

Bibliographie

Cours complet de HTML et CSS de Pierre Giraud.

Tutoriel sur la création d’un site CV en HTML et CSS.

Cours sur le modèle de boite flexible de alascréation.com.