portfolio/stage2025.html
2025-04-23 16:47:00 +02:00

505 lines
23 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Portfolio - Maïssane Elmjidi</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<!-- Main CSS File -->
<link href="assets/css/main.css" rel="stylesheet">
<!-- =======================================================
* Template Name: Gp
* Template URL: https://bootstrapmade.com/gp-free-multipurpose-html-bootstrap-template/
* Updated: Jun 29 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body class="portfolio-details-page">
<header id="header" class="header d-flex align-items-center position-relative">
<div class="container-fluid container-xl position-relative d-flex align-items-center justify-content-between">
<a href="index.html" class="logo d-flex align-items-center me-auto me-lg-0">
<!-- Uncomment the line below if you also wish to use an image logo -->
<!-- <img src="assets/img/logo.png" alt=""> -->
<h6>maïssane elmjidi<span>.</span> </h6>
<h3 class="sitename">Mon Portefolio</h3>
<!-- <span>.</span> -->
</a>
<nav id="navmenu" class="navmenu">
<ul>
<li><a href="index.html" class="active"> Retour à l'accueil<br></a></li>
<!-- <li><a href="#about">A propros de moi </a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#team">Team</a></li>
<li class="dropdown"><a href="#"><span>Mon experience </span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
<ul> -->
<!-- <li><a href="#">Dropdown 1</a></li> -->
<!-- <li class="dropdown"><a href="#"><span>Mes stages</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
<ul>
<li><a href="stage2024.html"> année 2024</a></li>
<li><a href="#">année 2025 </a></li> -->
<!-- <li><a href="#">Deep Dropdown 3</a></li> -->
<!-- <li><a href="#">Deep Dropdown 4</a></li> -->
<!-- <li><a href="#">Deep Dropdown 5</a></li> -->
</ul>
</li>
<!-- <li><a href="#">Dropdown 2</a></li> -->
<!-- <li><a href="#">Dropdown 3</a></li> -->
<!-- <li><a href="#">Dropdown 4</a></li> -->
</ul>
</li>
<!-- <li><a href="#contact">Contact</a></li> -->
</ul>
<i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
</nav>
</div>
</header>
<main class="main">
<!-- Page Title -->
<div class="page-title" data-aos="fade">
<div class="heading">
<div class="container">
<div class="row d-flex justify-content-center text-center">
<div class="col-lg-8">
<h1>Déroulement de mon stage au sein de la maison de l'université à Dijon -2025</h1>
<!-- <p class="mb-0"> Suite à la nouvelle charte de télétravail,les agents peuvent à présent faire leurs demandes de jours flottants. Lobjet de ce projet consiste à créer le formulaire de demande .</p> -->
</div>
</div>
</div>
</div>
<nav class="breadcrumbs">
<div class="container">
<ol>
<li><a href="index.html">Accueil</a></li>
<li class="current">stage 2025</li>
</ol>
</div>
</nav>
</div><!-- End Page Title -->
<!-- Portfolio Details Section -->
<section id="portfolio-details" class="portfolio-details section">
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row gy-4">
<div class="col-lg-8">
<div class="portfolio-details-slider swiper init-swiper">
<script type="application/json" class="swiper-config">
{
"loop": true,
"speed": 600,
"autoplay": {
"delay": 5000
},
"slidesPerView": "auto",
"pagination": {
"el": ".swiper-pagination",
"type": "bullets",
"clickable": true
}
}
</script>
<div class="swiper-wrapper align-items-center">
<div class="swiper-slide">
<img src="assets/img/portfolio/03MaisUniversiteDijon.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/portfolio/07MaisUniversiteDijon2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/portfolio/01MaisUniversiteDijon3.jpg" alt="">
</div>
<!-- <div class="swiper-slide">
<img src="assets/img/portfolio/books-1.jpg" alt="">
</div> -->
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="col-lg-4">
<div class="portfolio-info" data-aos="fade-up" data-aos-delay="200">
<h3>Informations sur l'établissement</h3>
<ul>
<li><strong>Raison sociale</strong>: Université de Bourgogne</li>
<li><strong>Activité</strong>: enseignement supérieur</li>
<li><strong>Nombre de salariés</strong>: environ 5000 salariés </li>
<li><strong>L'équipe</strong>: Ingénierie Logicielle </li>
<li><strong> Missions de l'équipe</strong> :Assure les développements logiciels et lintégration web pour les besoins internes à luB (Sites web de composantes et laboratoires, Intranet, services numériques en ligne…) </li>
<li><strong>site</strong>: <a href="#"> https://www.pappers.fr/entreprise/universite-dijon-bourgogne-192112373 </a></li>
</ul>
</div>
<!-- <div class="portfolio-description" data-aos="fade-up" data-aos-delay="300">
<h2>Exercitationem repudiandae officiis neque suscipit</h2>
<p>
Autem ipsum nam porro corporis rerum. Quis eos dolorem eos itaque inventore commodi labore quia quia. Exercitationem repudiandae officiis neque suscipit non officia eaque itaque enim. Voluptatem officia accusantium nesciunt est omnis tempora consectetur dignissimos. Sequi nulla at esse enim cum deserunt eius.
</p>
</div> -->
</div>
</div>
</div>
</section><!-- /Portfolio Details Section -->
<!-- About Section -->
<section id="about" class="about section">
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row gy-4">
<div class="col-lg-6 order-1 order-lg-2">
<!-- <img src="assets/img/about.jpg" class="img-fluid" alt=""> -->
</div>
<div class="row d-flex justify-content-center text-center">
<div class="col-lg-8">
<h3>En ce qui concerne la mission de mon stage . </h3>
</div>
</div>
<div class="col-lg-6 order-2 order-lg-1 content">
<div class="row d-flex justify-content-center text-center">
</div>
<h3>Contexte</h3>
<p class="fst-italic">
A la demande du SEFCA (Service Commun de Formations Continue et par Alternance) de Dijon, une application web devra etre développé pour permettre la signature numerique des contrats de formations qui est adressé à lapprenti qui la signe, puis à lentreprise qui met le tampon, puis retournées au SEFCA.
</p>
<h3> Reunion avec le client </h3>
<p class ="fst-italic">
Réunion: Application de signature électronique. <br>
Date: 10 mars 2025.<br>
Heure: 16h.<br>
Lieu: Salle de réunion, à la Maison de lUniversité, à Dijon. <br>
Participants: Perrine Didi, Adeline Fradique , Florian Streicher, Maïssane El Mjidi.<br>
Objectif de la réunion: Clarifier les besoins du client et discuter des fonctionnalités principales de l'application qui permet la signature électronique de contrat en format .pdf.
<br> </p>
<h3>Expression des besoins du client </h3>
<p class="fst-italic">
</p>
<ul>
<li><i class="bi bi-check2-all"></i> <span>La cliente souhaite une application destinée à signer électroniquement les contrats de formation sous format pdf.</span></li>
<li><i class="bi bi-check2-all"></i> <span>Il doit y avoir trois signataires: le client , lentreprise , et le directeur de la SEFCA qui, lui, signe toujours à la fin.</span></li>
<li><i class="bi bi-check2-all"></i> <span>Cette application doit permettre de gérer les signatures des contrats de façon dématérialisée.</span></li>
<li><i class="bi bi-check2-all"></i> <span>Lapplication doit permettre aux entreprises de déposer leur tampon.</span></li>
<li><i class="bi bi-check2-all"></i> <span>Le contrat peut avoir un système de formulaire pour les cases à cocher, les poser sous forme de questions.</span></li>
<li><i class="bi bi-check2-all"></i> <span>Pour assurer la traçabilité lorsque le client signe, avec son mail ou une information de ce type.</span></li>
</ul>
</div>
</div>
<div class="col-lg-6 order-2 order-lg-1 content">
<h3>Déroulement du projet </h3>
<br><h4>- Elaboration de test effectués sur 2 semaines </h4>
<ul>
<li><i class=" bi-arrow-right-circle-fill"></i> <span>Utilisation des librairies: pdf.js, pdf-Lib, TCPDF, FPDI , interact.js </span></li>
<li><i class=" bi-arrow-right-circle-fill"></i> <span>Utilisation et installation: nodes.js , composer, git bash </span></li>
<br><h3> visuels de quelques tests </h3>
<div class="row">
<div class="imgcol">
<img src="assets/img/stage2/test1.png" class="img-fluid" alt="">
<div class="portfolio-info">
<p> MCD </p>
<p></p>
<a href="assets/img/stage2/test1.png" title="App 1" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
</div>
</div>
<div class="imgcol">
<img src="assets/img/stage2/test2.png" class="img-fluid" alt="">
<div class="portfolio-info">
<p> MCD </p>
<p></p>
<a href="assets/img/stage2/test2.png" title="App 1" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
</div>
</div>
</div>
<br><h3> arborescence de mes dossiers tests </h3>
<div class="row">
<div class="imgcol">
<img src="assets/img/stage2/test3.png" class="img-fluid" alt="">
<div class="portfolio-info">
<p> MCD </p>
<p></p>
<a href="assets/img/stage2/test3.png" title="App 1" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
</div>
</div>
<div class="imgcol">
<img src="assets/img/stage2/test4.png" class="img-fluid" alt="">
<div class="portfolio-info">
<p> MCD </p>
<p></p>
<a href="assets/img/stage2/test4.png" title="App 1" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
</div>
</div>
</div>
</div>
<style>
* {
box-sizing: border-box;
}
.imgcol {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
<br><h3>Importation du projet sur le git </h3>
<!-- <div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/img/masonry-portfolio/c.png" class="d-block w-10" alt="img-fluid">
</div>
<div class="carousel-item">
<img src="assets/img/masonry-portfolio/Capture d'écran 2024-06-12 140204.png" class="d-block w-0" alt="img-fluid">
</div> -->
<div id="carouselExampleIndicators" class="carousel slide" style="width: 100;">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1" style="color: black;"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2" ></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3" ></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4" ></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5" ></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5" aria-label="Slide 6" ></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6" aria-label="Slide 7" ></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="7" aria-label="Slide 1" ></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets//img/img_depotsign/acueille.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets//img/img_depotsign/editeur1.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets//img/img_depotsign/editeur2.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets//img/img_depotsign/editeur3.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets//img/img_depotsign/edit4.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets//img/img_depotsign/edit5.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets//img/img_depotsign/edit6.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets//img/img_depotsign//edit7.png" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true" style="color: black;" ></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true" style="color: black;" ></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- <div class="carousel-item">
<img src="assets/img/masonry-portfolio/Capture d'écran 2024-06-12 140204.png" class="d-block w-0" alt="img-fluid">
</div> -->
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev" style="color: black;">
<span class="carousel-control-prev-icon" aria-hidden="false" style="color: black;" ></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next" style="color: black;" >
<span class="carousel-control-next-icon" aria-hidden="false" style="color: black;"></span>
<span class="visually-hidden">Next</span>
</button>
<!-- <br><h3>Création de l'application </h3> -->
<!-- <div class="container text-center">
<div class="row">
<div class="col">
2 of 2
</div>
</div>
</div> -->
<!-- <div class="row gy-4 isotope-container" data-aos="fade-up" data-aos-delay="200">
<div class=" col-md-5 text-center" portfolio-item isotope-item filter-branding">
<img src="assets/img/masonry-portfolio/a-1.png" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>App 1</h4>
<p>Lorem ipsum, dolor sit</p>
<a href="assets/img/masonry-portfolio/a-1.png" title="App 1" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
<a href="portfolio-details.html" title="More Details" class="details-link"><i class="bi bi-link-45deg"></i></a>
</div>
</div></div>fin img Item -->
<!-- </section> -->
<!-- /About Section </h3> -->
<!--
<h4>Ouvrir le fichier PDF ->
<a href="file:///C:/Users/maissane/Downloads/Application%20demande%20jour%20flottant%20.pdf"> Visuel de l'application de demande de jour flottant </a>.
</h4> -->
</section>
</main>
<footer id="footer" class="footer dark-background">
<div class="footer-top">
<div class="container">
<div class="row gy-4">
<div class="col-lg-4 col-md-6 footer-about">
<a href="index.html" class="logo d-flex align-items-center">
<span class="sitename">Maissane El Mjidi</span>
</a>
<div class="footer-contact pt-3">
<!-- <p>Dijon</p> -->
<p class="mt-3"><strong>Phone:</strong> <span>+33 07 67 28 50 60 </span></p>
<p><strong>Email:</strong> <span>elmjidi.maissanee@gmail.com</span></p>
</div>
<div class="social-links d-flex mt-4">
<!-- <a href=""><i class="bi bi-twitter-x"></i></a>
<a href=""><i class="bi bi-facebook"></i></a>
<a href=""><i class="bi bi-instagram"></i></a> -->
<a href=""><i class="bi bi-linkedin"></i></a>
</div>
</div>
<!-- <div class="col-lg-2 col-md-3 footer-links">
<h4>Useful Links</h4>
<ul>
<li><i class="bi bi-chevron-right"></i> <a href="#"> Home</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#"> About us</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#"> Services</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#"> Terms of service</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#"> Privacy policy</a></li>
</ul>
</div> -->
<!-- <div class="col-lg-2 col-md-3 footer-links">
<h4>Our Services</h4>
<ul>
<li><i class="bi bi-chevron-right"></i> <a href="#"> Web Design</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#"> Web Development</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#"> Product Management</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#"> Marketing</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#"> Graphic Design</a></li>
</ul>
</div> -->
<!-- <div class="col-lg-4 col-md-12 footer-newsletter">
<h4>Our Newsletter</h4>
<p>Subscribe to our newsletter and receive the latest news about our products and services!</p>
<form action="forms/newsletter.php" method="post" class="php-email-form">
<div class="newsletter-form"><input type="email" name="email"><input type="submit" value="Subscribe"></div>
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your subscription request has been sent. Thank you!</div>
</form>
</div> -->
</div>
</div>
</div>
<div class="copyright">
<div class="container text-center">
<!-- <p>© <span>Copyright</span> <strong class="px-1 sitename"></strong> <span>All Rights Reserved</span></p>
<div class="credits"> -->
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you've purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: [buy-url] -->
Designed by <a href="">Maissane El Mjidi</a>
</div>
</div>
</div>
</footer>
<!-- Scroll Top -->
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Preloader -->
<div id="preloader"></div>
<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/js/particles.js"></script>
<!-- Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>