apsybloghome.files.wordpress.com · web viewje souhaite remercier mr. laurka mathieu kragbeu pour...
TRANSCRIPT
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 [email protected] 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.