Va la primera

Bla bla bla
main
Sigfrido Gonzalez Puga 4 years ago committed by GitHub
parent fff3fb9c18
commit 648a794ca0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 347
      A_Propos.htm
  2. 19
      Accueil.htm
  3. 781
      Connaitre_Raspberry_Pi.htm
  4. 400
      Contact.htm
  5. 367
      FAQ.htm
  6. 460
      Plan_Site.htm
  7. 392
      Sites_Interets.htm
  8. 329
      index.htm
  9. BIN
      resources/audio/BEBECOIS_REMIX_COMIC_by_CarlosMarulanda.mp3
  10. 84
      resources/css/audio.css
  11. 7
      resources/css/bootstrap.min.css
  12. 1
      resources/css/bootstrap.min.css.map
  13. 79
      resources/css/images.css
  14. 273
      resources/css/main.css
  15. 14
      resources/css/mapGoogle.css
  16. 1
      resources/css/sweetalert2.min.css
  17. 140
      resources/css/timeline.css
  18. BIN
      resources/images/RaspberryPi/12961865855_b022bf59dd.jpg
  19. BIN
      resources/images/RaspberryPi/19745896126_c51a3c610d_b.jpg
  20. BIN
      resources/images/RaspberryPi/3386716407_c973585e6e.jpg
  21. BIN
      resources/images/RaspberryPi/475px-Raspberry_Pi_Logo.png
  22. BIN
      resources/images/RaspberryPi/475px-Raspberry_Pi_Logo.svg.png
  23. BIN
      resources/images/RaspberryPi/RPi-Logo-Grey-Landscape-Reg-SCREEN.png
  24. BIN
      resources/images/RaspberryPi/RPi-Logo-Grey-Landscape-SCREEN.png
  25. BIN
      resources/images/RaspberryPi/RPi-Logo-Grey-Reg-SCREEN.png
  26. BIN
      resources/images/RaspberryPi/RPi-Logo-Grey-SCREEN.png
  27. BIN
      resources/images/RaspberryPi/RPi-Logo-Grey-Stacked-Reg-SCREEN.png
  28. BIN
      resources/images/RaspberryPi/RPi-Logo-Grey-Stacked-SCREEN.png
  29. BIN
      resources/images/logos/favicon.png
  30. BIN
      resources/images/logos/sigop_cartoon.jpg
  31. BIN
      resources/images/logos/sigop_cartoon.png
  32. BIN
      resources/images/logos/sigop_logo.jpg
  33. BIN
      resources/images/logos/sigop_logo.png
  34. 6
      resources/js/audio.js
  35. 7
      resources/js/bootstrap.bundle.min.js
  36. 1
      resources/js/bootstrap.bundle.min.js.map
  37. 4
      resources/js/jquery.min.js
  38. 43
      resources/js/main_begin_page.js
  39. 63
      resources/js/main_end_page.js
  40. 2
      resources/js/sweetalert2.all.min.js

@ -0,0 +1,347 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Sigfrido Gonzalez Puga">
<meta name="description" content="Page d'accueil du projet Tâche 2, module 462166.">
<title>EMICA Gr, i2013 Module 462166 - 2022</title>
<link href="./resources/css/main.css" rel="stylesheet">
<link rel="shortcut icon" href="./resources/images/logos/favicon.png" type="image/png">
<script src="./resources/js/jquery.min.js"></script>
<link href="./resources/css/bootstrap.min.css" rel="stylesheet">
<script src="./resources/js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/a5f1e023c3.js" crossorigin="anonymous"></script>
<script src="./resources/js/sweetalert2.all.min.js"></script>
<link rel='stylesheet' href='./resources/css/sweetalert2.min.css'>
<script src="./resources/js/main_begin_page.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@1,600&family=EB+Garamond:ital,wght@1,500&family=Roboto:wght@100&display=swap"
rel="stylesheet">
</head>
<body>
<div class="loader-page"></div>
<nav class="navbar navbar-expand-lg navbar-dark bg-color-berry-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="./resources/images/logos/favicon.png" height="28"
alt="CoolBrand">
Connaître Raspberry Pi</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="./Accueil.htm">Accueil </a> </li>
<li class="nav-item"><a class="nav-link" href="./Plan_Site.htm"> Plan du site </a></li>
<li class="nav-item"><a class="nav-link" href="./Sites_Interets.htm"> Sites d’intérêts </a></li>
<li class="nav-item"><a class="nav-link" href="./FAQ.htm"> FAQ </a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Connaître Raspberry Pi
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#histoire"> Un peu
d'histoire</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#arduino"> Arduino... Qui
est-ce ? </a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#raspberry"> Pourquoi
Raspberry Pi et non Arduino ? </a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#composeRaspberry"> Comment
se compose Raspberry Pi ? <i class="fa-solid fa-circle-chevron-right"></i> </a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw"> <i
class="fa-solid fa-circle-chevron-left"></i> Le Hardware</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_cpu">CPU/GPU</a></li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_ram">RAM</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw_usb">USB
hub</a></li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_ethernet">Ethernet</a></li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_io">I/O</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#sw"> <i
class="fa-solid fa-circle-chevron-left"></i> Le Software</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#sw_os">Système d'exploitation</a>
</li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#sw_app">Logiciel
d’applications</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#quoi_faire"> Ce que vous
pouvez faire avec le Raspberry Pi <i class="fa-solid fa-circle-chevron-right"></i>
</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#idees_Simples">Voici
quelques idées simples</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#idees_avancees">Et
pour les plus aventureux</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link active" href="#"> À propos </a></li>
<li class="nav-item"><a class="nav-link" href="./Contact.htm"> Contact </a></li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link sweetalert2_login" href="#"> <i
class="fa-regular fa-user"></i> Login
</a></li>
</ul>
</div>
<!-- navbar-collapse.// -->
</div>
<!-- container-fluid.// -->
</nav>
<!-- End menu (for all pages) -->
<div class="container">
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="./Accueil.htm">Accueil</a></li>
<li class="breadcrumb-item active">À propos</li>
</ol>
</nav>
<div class="container-lg my-2">
<h1><i class="fa-solid fa-circle-info"></i> À propos</h1>
<div class="mx-auto" style="width: 200px;">&nbsp;</div>
<div class="row">
<div class="col-md-6">
<p class="display-6">À propos le site </p>
<div class="card" style="max-width: 700px;">
<div class="row g-0">
<div class="col-sm-5">
<div class="berry_contenedor">
<img src="./resources/images/RaspberryPi/475px-Raspberry_Pi_Logo.svg.png"
width="200" alt="" />
<img class="top" src="./resources/images/RaspberryPi/475px-Raspberry_Pi_Logo.png"
width="200" alt="" />
</div>
</div>
<div class="col-sm-7">
<div class="card-body">
<blockquote class="blockquote">
<p>
Dans le but de soutenir réellement les personnes désireuses d'entrer
dans le monde
merveilleux de
l'informatique, j'ai décidé de réaliser mon projet sur la base du
Raspberry Pi.
</p>
<p>
Sachant que, au moins dans mon pays d'origine, l'informatique n'est pas
répandue de
manière
générale ou
précise,
ce projet vise à apporter à cette personne une alternative économique et
un haut
degré
d'apprentissage.
</p>
<p>
Il est possible d'obtenir un modèle de la carte Raspberry Pi pour très
peu d'argent
par
rapport à un
ordinateur
de bureau ou un ordinateur portable. Et avec le modèle de la carte on
apprendrait
dès le
début ;
assembler les
éléments. Mais les connaissances ne s'arrêtent pas là, il peut
expérimenter le
codage et
réaliser ses
propres
projets sur la base de cette technologie logicielle et matérielle.
</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<p class="display-6">À propos tâche 2</p>
<div class="card" style="max-width: 700px;">
<div class="row g-0">
<div class="col-sm-5">
<img src="./resources/images/logos/sigop_cartoon.png" width="150"
class="card-img-top h-150" alt="...">
</div>
<div class="col-sm-7">
<div class="card-body">
<blockquote class="blockquote">
<h4><a href="https://sigop.net" target="_blank">Sigfrido Gonzalez Puga</a>
</h4> <br>
<i>Groupe i2013</i><br>
<b>MOYEN DE TÉLÉCOMMUNICATIONS</b><br> <br>
<b>Connaître Raspberry Pi</b><br> <br>
<i>Travail présenté à <br> M. Kevin Gagnon</i><br> <br>
<b>ÉMICA | Annexe de Montréal</b><br>
<i>Juin 2022</i><br> <br>
<small>
<a href="https://school.sigop.net/EMICA/462166"
target="_blank">https://school.sigop.net/EMICA/462166</a>
</small><br>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer, the same for all pages -->
<div class="w-auto p-3">
<!-- Footer -->
<footer class="text-center text-lg-start text-muted bg-color-berry-light">
<!-- Section: Social media -->
<div class="d-flex justify-content-center justify-content-lg-between p-4 txt_color_berry">
</div>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="txt_color_berry">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-lg-4 text-center" style="width: 300px;">
<div class="text-start">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-solid fa-sitemap"></i>
&nbsp;
Plan du
site</h6>
<ul class="list-unstyled">
<li class="shadow_menu"><a href="./Accueil.htm" class="underline"><i
class="fa-solid fa-house-user"></i> Accueil</a>
</li>
<li class="shadow_menu"><a href="./Plan_Site.htm" class="underline"><i
class="fa-solid fa-sitemap"></i> Plan du
site</a></li>
<li class="shadow_menu"><a href="./Sites_Interets.htm" class="underline"><i
class="fa-solid fa-book-atlas"></i> Sites
d’intérêts</a></li>
<li class="shadow_menu"><a href="./FAQ.htm" class="underline"><i
class="fa-solid fa-circle-question"></i>
FAQ</a></li>
<li class="shadow_menu"><a href="./Connaitre_Raspberry_Pi.htm" class="underline"><i
class="fa-brands fa-raspberry-pi"></i>
Connaître Raspberry Pi</a></li>
<li class="shadow_menu"><a href="./A_Propos.htm" class="underline"><i
class="fa-solid fa-circle-info"></i> À
propos</a></li>
<li class="shadow_menu"><a href="./Contact.htm" class="underline"><i
class="fa-solid fa-paper-plane"></i>
Contactez-nous</a></li>
</ul>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 text-center">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-brands fa-raspberry-pi"></i>
EducaJeux inc.</h6>
<p>MOYEN DE TÉLÉCOMMUNICATIONS</p>
<p><b>Tâche 2</b>
<br>Gr. i2013, juin 2022
<br>Sigfrido Gonzalez Puga
</p>
<hr>
<div class="row">
<div class="">
<div class="demo-content text-center">Site web réactif et compatible avec <br> les
navigateurs les plus courants : <br> <i class="fa-brands fa-chrome"
title="Chrome"></i> <i class="fa-brands fa-opera" title="Opera"></i> <i
class="fa-brands fa-safari" title="Safari"></i> <i class="fa-brands fa-edge"
title="Edge"></i> <i class="fa-brands fa-firefox" title="Firefox"></i></div>
</div>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 text-center">
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-solid fa-paper-plane"></i>
Contactez-nous</h6>
<p>
<i class="fas fa-home me-3"></i> 6255 13e Ave., Montréal, QC H1X 2Y6 <br>
<i class="fas fa-envelope me-3"></i>it-system@sigop.net <br>
<i class="fas fa-phone me-3"></i> (514) 742 6198 <br>
<i class="fa-brands fa-internet-explorer"></i> <a
href="https://school.sigop.net/EMICA/462166/"
target="_blank">https://school.sigop.net/EMICA/462166/</a>
</p> <br>
<hr>
Retrouvez-nous sur nos réseaux sociaux: <br>
<a href="https://sigop.net/" target="_blank" class="me-4 text-reset"><i
class="fa-regular fa-address-card"></i></a>
<a href="https://www.linkedin.com/in/sigop" target="_blank" class="me-4 text-reset"><i
class="fab fa-linkedin"></i></a>
<a href="https://github.com/sgonzalp" target="_blank" class="me-4 text-reset"><i
class="fab fa-github"></i></a>
<a href="https://sigop.wordpress.com/" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-wordpress"></i></a>
<a href="https://blog.sigop.net/" target="_blank" class="me-4 text-reset"><i
class="fa-thin fa-note"></i></a>
<a href="https://www.facebook.com/www.SiGoP.net" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-facebook-f"></i></a>
<a href="https://twitter.com/sigopnet" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-twitter"></i></a>
<a href="https://www.youtube.com/c/SigfridoGonzalezPuga" target="_blank"
class="me-4 text-reset"><i class="fa-brands fa-youtube"></i></a>
<a href="http://instagram.com/sgonzalp/" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-instagram"></i></a>
<a href="https://pinterest.com/sgonzalezpuga" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-pinterest-square"></i></a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<div>&nbsp;</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: #44B28A; color: #FFF;">
<p>Copyright &copy; 2022 EducaJeux inc.</p>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</div>
<script src="./resources/js/main_end_page.js"></script>
</body>
</html>

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="0; url=./index.htm" />
<title>Redirect in progress...
</title>
</head>
<body>
<pre>
Accueil
</pre>
</body>
</html>

@ -0,0 +1,781 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Sigfrido Gonzalez Puga">
<meta name="description" content="Page d'accueil du projet Tâche 2, module 462166.">
<title>EMICA Gr, i2013 Module 462166 - 2022</title>
<link href="./resources/css/main.css" rel="stylesheet">
<link rel="stylesheet" href="./resources/css/images.css">
<link rel="stylesheet" href="./resources/css/audio.css">
<link rel="shortcut icon" href="./resources/images/logos/favicon.png" type="image/png">
<script src="./resources/js/jquery.min.js"></script>
<link href="./resources/css/bootstrap.min.css" rel="stylesheet">
<script src="./resources/js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/a5f1e023c3.js" crossorigin="anonymous"></script>
<script src="./resources/js/sweetalert2.all.min.js"></script>
<link rel='stylesheet' href='./resources/css/sweetalert2.min.css'>
<script src="./resources/js/main_begin_page.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@1,600&family=EB+Garamond:ital,wght@1,500&family=Roboto:wght@100&display=swap"
rel="stylesheet">
</head>
<body>
<div class="loader-page"></div>
<nav class="navbar navbar-expand-lg navbar-dark bg-color-berry-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="./resources/images/logos/favicon.png" height="28"
alt="CoolBrand">
Connaître Raspberry Pi</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="./Accueil.htm">Accueil </a> </li>
<li class="nav-item"><a class="nav-link" href="./Plan_Site.htm"> Plan du site </a></li>
<li class="nav-item"><a class="nav-link" href="./Sites_Interets.htm"> Sites d’intérêts </a></li>
<li class="nav-item"><a class="nav-link" href="./FAQ.htm"> FAQ </a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" data-bs-toggle="dropdown"> Connaître
Raspberry Pi</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#histoire"> Un peu
d'histoire</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#arduino"> Arduino... Qui
est-ce ? </a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#raspberry"> Pourquoi
Raspberry Pi et non Arduino ? </a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#composeRaspberry"> Comment
se compose Raspberry Pi ? <i class="fa-solid fa-circle-chevron-right"></i> </a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw"> <i
class="fa-solid fa-circle-chevron-left"></i> Le Hardware</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_cpu">CPU/GPU</a></li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_ram">RAM</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw_usb">USB
hub</a></li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_ethernet">Ethernet</a></li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_io">I/O</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#sw"> <i
class="fa-solid fa-circle-chevron-left"></i> Le Software</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#sw_os">Système d'exploitation</a>
</li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#sw_app">Logiciel
d’applications</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#quoi_faire"> Ce que vous
pouvez faire avec le Raspberry Pi <i class="fa-solid fa-circle-chevron-right"></i>
</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#idees_Simples">Voici
quelques idées simples</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#idees_avancees">Et
pour les plus aventureux</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link first" href="./A_Propos.htm"> À propos </a></li>
<li class="nav-item"><a class="nav-link" href="./Contact.htm"> Contact </a></li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link sweetalert2_login" href="#"> <i
class="fa-regular fa-user"></i> Login
</a></li>
</ul>
</div>
<!-- navbar-collapse.// -->
</div>
<!-- container-fluid.// -->
</nav>
<!-- End menu (for all pages) -->
<div class="container">
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="./Accueil.htm">Accueil</a></li>
<li class="breadcrumb-item active">Connaître Raspberry Pi</li>
</ol>
</nav>
<h1><i class="fa-brands fa-raspberry-pi"></i> Connaître Raspberry Pi</h1>
<div class="accordion col-md-6" id="musique" style="margin:0px auto;">
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button type="button" class="accordion-button bg-info collapsed text-dark" data-bs-toggle="collapse"
data-bs-target="#collapseMusique">Voulez-vous écouter de la musique pendant que vous lisez
?</button>
</h2>
<div id="collapseMusique" class="accordion-collapse collapse" data-bs-parent="#musique">
<div class="card-body">
<div class="musica">
<audio controls>
<source src="./resources/audio/BEBECOIS_REMIX_COMIC_by_CarlosMarulanda.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</div>
<h5 class="card-title text-center">Bebecois Remix Comic</h5>
<p class="card-text text-center">« © <a href="https://www.instagram.com/carlos_m_jimenezmusik/"
target="_blank">Carlos Marulanda</a>, 2017 »
</p>
</div>
</div>
</div>
</div>
<div class="m-4">
<div class="card text-center" id="histoire">
<div class="card-header display-6">Un peu d'histoire</div>
<div class="card-body text-start">
<div class="row g-3">
<div class="col-md-6">
<div class="card">
<p class="contenedor"><img class="img-fluid imagen imagen-slide"
src="https://thumbs.dreamstime.com/b/lego-storybook-red-dragon-made-bricks-spitting-fire-43527303.jpg"
alt=""></p>
<div class="card-body text-center">
Lego History Stock Photos (<a
href="https://www.dreamstime.com/photos-images/lego-history.html"
target="_blank">URL image</a>)
</div>
</div>
</div>
<div class="col-md-6">
<p>En 2009, une entité a été fondée dont l'objectif initial était de stimuler les
étudiants en
informatique : la "Fondation Raspberry Pi".
</p>
<p>
Ils ont cherché le soutien d'enseignants et d'experts dans différentes matières
technologiques
afin de fabriquer un petit ordinateur à bas prix pour qu'il soit accessible au plus
grand
nombre, aux enfants bien sûr, et qu'ils entrent dans l'apprentissage de l'informatique.
</p>
<p>
Un premier prototype a été lancé en 2012, monté sur un minuscule module semblable à une
clé USB.
Ce premier prototype n'avait qu'une connexion USB d'un côté et une HDMI de l'autre.
</p>
<p>
Mais malgré sa simplicité, le prototype a eu plus de succès que prévu et a permis de
diversifier
son utilisation dans d'autres domaines que celui promu.</p>
</div>
</div>
<div class="card-footer text-muted">
</div>
</div>
</div>
<div class="mx-auto" style="width: 200px;">&nbsp;</div>
<div class="card text-center">
<div class="card-header display-6" id="arduino">Arduino... Qui est-ce ?</div>
<div class="card-body text-start">
<div class="row g-3">
<div class="col-md-6">
<div class="card">
<p class="contenedor"><img class="img-fluid imagen imagen-rota"
src="https://live.staticflickr.com/3728/9583831483_00cbec7d65_b.jpg" alt=""></p>
<div class="card-body text-center">
<p class="attribution">"<a target="_blank" rel="noopener noreferrer"
href="https://www.flickr.com/photos/52250666@N02/9583831483">arduino</a>" by
<a target="_blank" rel="noopener noreferrer"
href="https://www.flickr.com/photos/52250666@N02">gabriella_levine</a> is
licensed
under <a target="_blank" rel="noopener noreferrer"
href="https://creativecommons.org/licenses/by-nc-sa/2.0/?ref=openverse">CC
BY-NC-SA
2.0 <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg"
style="height: 1em; margin-right: 0.125em; display: inline;" alt=""><img
src="https://mirrors.creativecommons.org/presskit/icons/by.svg"
style="height: 1em; margin-right: 0.125em; display: inline;" alt=""><img
src="https://mirrors.creativecommons.org/presskit/icons/nc.svg"
style="height: 1em; margin-right: 0.125em; display: inline;" alt=""><img
src="https://mirrors.creativecommons.org/presskit/icons/sa.svg"
style="height: 1em; margin-right: 0.125em; display: inline;"
alt=""></a>.
</p>
</div>
</div>
</div>
<div class="col-md-6">
<p>Il existe d'autres produits similaires sur le marché, le plus connu est Arduino.
</p>
<p>
Il serait très laborieux et long de faire la recherche et la comparaison avec les autres
alternatives de Raspberry. C'est donc contre Arduino qu'il a été décidé de comparer afin
de
réaliser ce document.
</p>
<p>
Arduino a vu le jour en 2005 en Italie. Son objectif était d'offrir aux étudiants une
option
abordable, simple et accessible pour leurs études d'électronique et de programmation.
</p>
<p>
S'il est vrai qu'Arduino est beaucoup plus ancien que Raspberry Pi et qu'il a évolué
depuis son
premier prototype, la philosophie de la simplicité n'a pas changé : interagir avec
l'environnement.
</p>
<p>
Il dispose d'un microcontrôleur qui interagit avec des capteurs et des actionneurs
grâce à des
entrées ou des sorties analogiques ou numériques.
</p>
<p>
Arduino est une plateforme open source. C'est-à-dire qu'en termes de matériel,
chacun peut
fabriquer sa propre carte ou utiliser celles disponibles sur le marché. En ce qui
concerne le
logiciel, Arduino vous permet de programmer le microcontrôleur à partir d'IDE
(Integrated
Development Environment) open source ainsi que d'utiliser des applications
existantes ou de
mettre à disposition de la communauté les applications créées (n'oubliez pas qu'il
s'agit d'un
logiciel open source).
</p>
</div>
</div>
<div class="card-footer text-muted">
</div>
</div>
</div>
<div class="mx-auto" style="width: 200px;">&nbsp;</div>
<div class="card text-center">
<div class="card-header display-6" id="raspberry">Pourquoi Raspberry Pi et non Arduino ?</div>
<div class="card-body text-start">
<div class="row g-3">
<div class="col-md-6">
<div class="card">
<p class="contenedor"><img class="img-fluid imagen imagen-opacy"
src="https://live.staticflickr.com/8057/8226451812_be4a991216_k.jpg" alt=""></p>
<div class="card-body text-center">
Photo Chris Potter (<a href="https://www.flickr.com/photos/86530412@N02/8226451812"
target="_blank">URL d'image</a>)
</div>
</div>
</div>
<div class="col-md-6">
<p>Il s'agit d'une question authentique et obligatoire. Mais la réponse est simple et elle
est
précisément due à la simplicité de l'Arduino.</p>
<p>
Si Arduino est la meilleure alternative dans certains projets où la simplicité et la
spécialisation sont élémentaires, pour le but de ce travail, ce n'est pas suffisant.
</p>
<p>
Il est vrai que la limite est la propre imagination de chaque personne qui va
entreprendre
son
projet dans l'une de ces technologies. Mais le présent travail aborde la généralité afin
que
la
personne qui va commencer avec Raspberry Pi puisse voir le potentiel qu'il peut avoir.
Déjà
avec
plus d'expérience, vous pouvez décider de passer aux spécificités si cela vous semble
nécessaire.
</p>
</div>
</div>
<div class="card-footer text-muted">
</div>
</div>
</div>
<div class="mx-auto" style="width: 200px;">&nbsp;</div>
<div class="card text-center">
<div class="card-header display-6" id="composeRaspberry">Comment se compose Raspberry Pi ?</div>
<div class="card-body text-start">
<div class="row g-3">
<div class="col-md-6">
<div class="card">
<p class="contenedor"><img class="img-fluid imagen imagen-zoom"
src="https://live.staticflickr.com/2207/12961865855_b022bf59dd.jpg" alt=""></p>
<div class="card-body text-center">
<p class="attribution">"<a target="_blank" rel="noopener noreferrer"
href="https://www.flickr.com/photos/91795203@N02/12961865855">Raspberry
Pi</a>" by <a target="_blank" rel="noopener noreferrer"
href="https://www.flickr.com/photos/91795203@N02">xmodulo</a> is licensed
under <a target="_blank" rel="noopener noreferrer"
href="https://creativecommons.org/licenses/by/2.0/?ref=openverse">CC BY 2.0
<img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg"
style="height: 1em; margin-right: 0.125em; display: inline;" alt=""><img
src="https://mirrors.creativecommons.org/presskit/icons/by.svg"
style="height: 1em; margin-right: 0.125em; display: inline;"
alt=""></a>. </p>
</div>
</div>
</div>
<div class="col-md-6">
<p>Le Raspberry Pi consiste en une carte qui possède tous les composants nécessaires pour
fonctionner comme un ordinateur traditionnel.
</p>
<p>
Elle a également ses limites compte tenu de la taille et des caractéristiques des
composants. Il
vous permet de programmer et de compiler des programmes qui s'exécutent sur lui.
</p>
<p>
Le logiciel est Open Source. Mais pour ce qui est du matériel, la Fondation Raspberry
garde le
contrôle de la fabrication des cartes, seule la fondation peut les fabriquer.
</p>
</div>
</div>
<div class="mx-auto" style="width: 200px;">&nbsp;</div>
<div class="row g-3">
<div class="objetfitcover cont_tit_img">
<img class="img-fluid imagen imagen-blur"
src="https://c.pxhere.com/photos/7e/ce/electrician_lego_repair_craftsmen_elektroniker_board_computer_chip-925691.jpg!d"
alt="">
<div class="cent_title_img text-capitalize display-6" id="hw"><em>Le Hardware</em></div>
</div>
<div class="mx-auto" style="width: 200px;">&nbsp;</div>
<p>Il existe à ce jour plusieurs versions du Raspberry Pi. En ce qui concerne le matériel, nous
parlerons du Raspberry Pi 4 Model B avec 2GB de mémoire RAM car il s'agit de la version la
plus récente et la plus économique. Il faut savoir que vous pouvez étendre les
fonctionnalités en ajoutant de la mémoire ou d'autres composants. Il est certain que cela
augmentera également votre coût d'achat.
Schéma fonctionnel pour schématiser les composants matériels du Raspberry Pi.</p>
<div class="row">
<div class="col-md-6">
<div class="card border-primary mb-4">
<div class="card-body text-primary">
<h5 class="card-title display-6" id="hw_cpu">CPU/GPU</h5>
<p class="card-text">Le SoC Broadcom 2711 a 64-bit quadruple cœur est empilé
sous la puce de RAM, comprend un processeur ARM Cortex-A72 à une fréquence
d'horloge de 1.5 GHz, une unité de traitement graphique (GPU) VideoCore VI à
500 MHz et de la mémoire RAM. Il possède un cache de niveau 1 (L1) de 16 Ko
et un cache de niveau 2 (L2) de 128 Ko.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-secondary mb-4">
<div class="card-body text-secondary">
<h5 class="card-title display-6" id="hw_ram">RAM</h5>
<p class="card-text">La version moins chère est proposée avec 2 Go de mémoire
vive (LPDDR4 SDRAM), mais il existe également des versions de 4 et 8 Go.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-success mb-4">
<div class="card-body text-success">
<h5 class="card-title display-6" id="hw_usb">USB hub</h5>
<p class="card-text">La charte intègre deux ports USB 2.0 et deux ports USB 3.0.
C'est-à-dire qu'il y a jusqu'à 4 ports USB disponibles au total.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-warning mb-4">
<div class="card-body text-warning">
<h5 class="card-title display-6" id="hw_ethernet">Ethernet</h5>
<p class="card-text">Pour la connexion aux réseaux, il dispose de la technologie
True Gigabit Ethernet ainsi que wireless LAN intégré à la carte (dual-band
802.11 b/g/n/ac).</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-danger mb-4">
<div class="card-body text-danger">
<h5 class="card-title display-6" id="hw_io">I/O</h5>
<p class="card-text">Les périphériques compatibles USB peut être adaptés grâce
aux ports disponibles sur la carte. Ainsi, vous pouvez disposer d'une
souris, d'un clavier, d'un écran, d'une imprimante et de bien d'autres
périphériques encore. Pour terminer avec cette section, il est important de
mentionner qu'il serait raisonnable d'investir un peu plus d'argent pour
obtenir l'Étui et le Bloc d'alimentation correspondant à la version. Les
deux sont proposés séparément.</p>
</div>
</div>
</div>
</div>
</div>
<div class="mx-auto" style="width: 200px;">&nbsp;</div>
<div class="row g-3">
<div class="objetfitcover cont_tit_img">
<img class="img-fluid imagen imagen-blur"
src="https://live.staticflickr.com/4132/4948494811_f94cba9c87_b.jpg" alt="">
<div class="cent_title_img text-capitalize display-6" id="sw"><em>Le Software</em></div>
</div>
<div class="mx-auto" style="width: 200px;">&nbsp;</div>
Nous avons déjà parlé du matériel Raspberry Pi, il est maintenant temps de parler du logiciel
qui fait fonctionner cette option technologique extraordinaire.
<div class="mx-auto" style="width: 200px;">&nbsp;</div>
<div class="row">
<div class="col-md-6">
<div class="card border-primary mb-4">
<div class="card-body text-primary">
<h5 class="card-title display-6" id="sw_os">Système d'exploitation</h5>
<p>
De base et officiellement, son système d'exploitation est une adaptation de
Debian,
appelée
<mark>Raspbian</mark>.
</p>
<p>
Toutefois, vous pouvez installer d'autres systèmes d'exploitation existants
(par exemple
une
version adaptée de Windows 10) ou, pourquoi pas, créer votre propre système
d'exploitation.
</p>
<p>
La liste des systèmes d'exploitation est très étendue, certains d'entre eux
sont
énumérés
ci-dessous.
</p>
<ol class="list-group list-group-numbered">
<li class="list-group-item">Snappy Ubuntu Core Pi 2, basé sur la
distribution Ubuntu</li>
<li class="list-group-item">OpenELEC, est une distribution Linux légère
basée sur le lecteur multimédia XBMC.
</li>
<li class="list-group-item">Pidora, basé sur la distribution Fedora.</li>
<li class="list-group-item">RaspAnd Pi 2, basé sur Android 5.1</li>
<li class="list-group-item">Windows 10 IoT Core for Raspberry Pi 2 / 3, est
une petite version de Windows 10.
</li>
</ol>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-danger mb-4">
<div class="card-body text-danger">
<h5 class="card-title display-6" id="sw_app">Logiciel d’applications</h5>
<p>
Selon le système d'exploitation, vous pouvez disposer de divers logiciels
d'application.
</p>
<p>
Dans le
cas des systèmes d'exploitation basés sur linux, l'installation se fera
principalement à
partir
de la ligne de commande :
</p>
<p class="bg-secondary text-warning text-center">
sudo apt install «nom du paquet d'installation»
</p>
<p>
Mais, en général, nous pouvons compter sur la gamme d'applications que nous
pourrions
avoir
sur
un ordinateur de bureau : </p>
<ol class="list-group list-group-numbered">
<li class="list-group-item">Éditeurs graphiques (Gimp, Inkscape)</li>
<li class="list-group-item">Éditeurs
multimédias
(VLC, QMMP, Audacity, Kdenlive)</li>
<li class="list-group-item">Émulateurs de jeux vidéo</li>
<li class="list-group-item">Clients Torrent</li>
<li class="list-group-item">Suites
bureautiques
(LibreOffice)</li>
</ol>
<p>Pour
n'en citer que quelques-uns.
</p>
</div>
</div>
</div>
</div>
<div class="card-footer text-muted">
</div>
</div>
</div>
</div>
<div class="mx-auto" style="width: 200px;">&nbsp;</div>
<div class="card text-center">
<div class="card-header display-6" id="quoi_faire">Ce que vous pouvez faire avec le Raspberry Pi</div>
<div class="card-body text-start">
<div class="row g-3">
<div class="col-md-6">
<div class="card">
<p class="contenedor"><img class="img-fluid imagen imagen-saturate"
src="https://c.pxhere.com/images/ec/3a/274b6419c2a27421b9e8a780e4dd-1582957.jpg!d"
alt=""></p>
<div class="card-body text-center">
Auteur image : <a href="https://pxhere.com/en/photographer/767067"
target="_blank">mohamed hassan</a>
</div>
</div>
</div>
<div class="col-md-6">
<p>
Les thèmes du matériel et du logiciel ont été abordés. Il a également été constaté que
la
Raspberry n'est pas la seule option sur le marché. Il est temps d'aborder le précieux
sujet
de
ce qu'il faut faire avec un Raspberry Pi.
</p>
<p>
Dans un premier temps, vous pouvez apprendre comment fonctionne un ordinateur. Assembler
les
composants, installer et configurer le logiciel.
</p>
<p>
Jusqu'à ce stade, nous aurons un mini-ordinateur prêt à être utilisé pour regarder des
films,
écouter de la musique, surfer sur Internet, créer des documents texte ou des feuilles de
calcul,
éditer des photos et des vidéos, jouer à des jeux vidéo.
</p>
<p>
Mais pourquoi se contenter de ça ?
</p>
<p>
Nous pouvons être plus créatifs avec ce petit appareil.
</p>
</div>
<div class="row g-3">
<div class="col-md-6">
<h5 class="display-6 text-info" id="idees_Simples">Voici quelques idées simples</h5>
<ol class="card border-success list-group list-group-numbered">
<li class="list-group-item">
Un mini-ordinateur pour les travaux généraux. Nous pouvons assembler et
configurer
l'appareil
pour qu'il puisse être utilisé comme un ordinateur de bureau, avec souris,
clavier,
écran et
connexion Internet, ainsi que les applications appropriées telles que les suites
bureautiques.
Mais Raspberry propose une version qui inclut la carte et ses composants dans un
boîtier
qui est
aussi le clavier. C'est le Raspberry Pi 400. Il suffit de connecter l'appareil à
un
moniteur ou
à un écran de télévision.
</li>
<li class="list-group-item">
En installant les bonnes applications sur l'appareil, nous pouvons encourager
les
enfants à
apprendre à programmer de manière ludique.
</li>
<li class="list-group-item">Nous pouvons faire de l'appareil un centre de
divertissement et de multimédia.
</li>
<li class="list-group-item">
Utilisez l'appareil comme serveur de courrier, serveur web, serveur de
téléchargement de
torrents...
</li>
<li class="list-group-item">Transformer le Raspberry Pi en un émetteur FM.</li>
</ol>
</div>
<div class="col-md-6">
<h5 class="display-6 text-danger" id="idees_avancees">Et pour les plus aventureux</h5>
<ol class="card border-warning list-group list-group-numbered">
<li class="list-group-item">Gérez les appareils IoT pour rendre la maison plus
intelligente.</li>
<li class="list-group-item">Lightberry</li>
<li class="list-group-item">Fabriquez votre propre téléphone portable (projet
PiPhone).</li>
<li class="list-group-item">Faire une station météorologique (projet Raspberry Pi
Internet Weather Station).
</li>
<li class="list-group-item">Faire une caméra de surveillance (projet Raspberry Pi As
Low-cost HD
Surveillance
Camera).</li>
</ol>
</div>
</div>
<div class="mx-auto" style="width: 200px;">&nbsp;</div>
</div>
<div class="card-footer text-muted">
</div>
</div>
</div>
<div class="mx-auto" style="width: 200px;">&nbsp;</div>
<div class="objetfitcover cont_tit_img">
<img class="img-fluid imagen imagen-blur"
src="https://cdn.thewirecutter.com/wp-content/media/2021/05/stafflegos-2048px-0906-2x1-1.jpg?auto=webp&quality=75&crop=2:1&width=980&dpr=2"
alt="">
<div class="cent_title_img text-capitalize display-6"><em>Bref... la limite est
l'imagination.</em></div>
</div>
<div class="mx-auto" style="width: 200px;">&nbsp;</div>
<p class="display-6 text-center">
Sur le site officiel de Raspberry, il y a une section spéciale de projets pour tous les
goûts :
</p>
<p class="display-6 text-center"><a href="https://projects.raspberrypi.org/en"
target="_blank">https://projects.raspberrypi.org/en</a></p>
<p class="display-6 text-center">
N’hésite pas de nous contacter dans n’importe quel besoin informatique vous avez, nous
sommes là
pour vous.
</p>
</div>
</div>
<!-- Footer, the same for all pages -->
<div class="w-auto p-3">
<!-- Footer -->
<footer class="text-center text-lg-start text-muted bg-color-berry-light">
<!-- Section: Social media -->
<div class="d-flex justify-content-center justify-content-lg-between p-4 txt_color_berry">
</div>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="txt_color_berry">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-lg-4 text-center" style="width: 300px;">
<div class="text-start">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-solid fa-sitemap"></i>
&nbsp;
Plan du
site</h6>
<ul class="list-unstyled">
<li class="shadow_menu"><a href="./Accueil.htm" class="underline"><i
class="fa-solid fa-house-user"></i> Accueil</a>
</li>
<li class="shadow_menu"><a href="./Plan_Site.htm" class="underline"><i
class="fa-solid fa-sitemap"></i> Plan du
site</a></li>
<li class="shadow_menu"><a href="./Sites_Interets.htm" class="underline"><i
class="fa-solid fa-book-atlas"></i> Sites
d’intérêts</a></li>
<li class="shadow_menu"><a href="./FAQ.htm" class="underline"><i
class="fa-solid fa-circle-question"></i>
FAQ</a></li>
<li class="shadow_menu"><a href="./Connaitre_Raspberry_Pi.htm" class="underline"><i
class="fa-brands fa-raspberry-pi"></i>
Connaître Raspberry Pi</a></li>
<li class="shadow_menu"><a href="./A_Propos.htm" class="underline"><i
class="fa-solid fa-circle-info"></i> À
propos</a></li>
<li class="shadow_menu"><a href="./Contact.htm" class="underline"><i
class="fa-solid fa-paper-plane"></i>
Contactez-nous</a></li>
</ul>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 text-center">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-brands fa-raspberry-pi"></i>
EducaJeux inc.</h6>
<p>MOYEN DE TÉLÉCOMMUNICATIONS</p>
<p><b>Tâche 2</b>
<br>Gr. i2013, juin 2022
<br>Sigfrido Gonzalez Puga
</p>
<hr>
<div class="row">
<div class="">
<div class="demo-content text-center">Site web réactif et compatible avec <br>
les
navigateurs les plus courants : <br> <i class="fa-brands fa-chrome"
title="Chrome"></i> <i class="fa-brands fa-opera" title="Opera"></i> <i
class="fa-brands fa-safari" title="Safari"></i> <i class="fa-brands fa-edge"
title="Edge"></i> <i class="fa-brands fa-firefox" title="Firefox"></i></div>
</div>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 text-center">
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-solid fa-paper-plane"></i>
Contactez-nous</h6>
<p>
<i class="fas fa-home me-3"></i> 6255 13e Ave., Montréal, QC H1X 2Y6 <br>
<i class="fas fa-envelope me-3"></i>it-system@sigop.net <br>
<i class="fas fa-phone me-3"></i> (514) 742 6198 <br>
<i class="fa-brands fa-internet-explorer"></i> <a
href="https://school.sigop.net/EMICA/462166/"
target="_blank">https://school.sigop.net/EMICA/462166/</a>
</p> <br>
<hr>
Retrouvez-nous sur nos réseaux sociaux: <br>
<a href="https://sigop.net/" target="_blank" class="me-4 text-reset"><i
class="fa-regular fa-address-card"></i></a>
<a href="https://www.linkedin.com/in/sigop" target="_blank" class="me-4 text-reset"><i
class="fab fa-linkedin"></i></a>
<a href="https://github.com/sgonzalp" target="_blank" class="me-4 text-reset"><i
class="fab fa-github"></i></a>
<a href="https://sigop.wordpress.com/" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-wordpress"></i></a>
<a href="https://blog.sigop.net/" target="_blank" class="me-4 text-reset"><i
class="fa-thin fa-note"></i></a>
<a href="https://www.facebook.com/www.SiGoP.net" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-facebook-f"></i></a>
<a href="https://twitter.com/sigopnet" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-twitter"></i></a>
<a href="https://www.youtube.com/c/SigfridoGonzalezPuga" target="_blank"
class="me-4 text-reset"><i class="fa-brands fa-youtube"></i></a>
<a href="http://instagram.com/sgonzalp/" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-instagram"></i></a>
<a href="https://pinterest.com/sgonzalezpuga" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-pinterest-square"></i></a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<div>&nbsp;</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: #44B28A; color: #FFF;">
<p>Copyright &copy; 2022 EducaJeux inc.</p>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</div>
<script src="./resources/js/main_end_page.js"></script>
<script src="./resources/js/audio.js"></script>
</body>
</html>

@ -0,0 +1,400 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Sigfrido Gonzalez Puga">
<meta name="description" content="Page d'accueil du projet Tâche 2, module 462166.">
<title>EMICA Gr, i2013 Module 462166 - 2022</title>
<link href="./resources/css/main.css" rel="stylesheet">
<link rel="stylesheet" href="./resources/css/images.css">
<link rel="stylesheet" href="./resources/css/mapGoogle.css">
<link rel="shortcut icon" href="./resources/images/logos/favicon.png" type="image/png">
<script src="./resources/js/jquery.min.js"></script>
<link href="./resources/css/bootstrap.min.css" rel="stylesheet">
<script src="./resources/js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/a5f1e023c3.js" crossorigin="anonymous"></script>
<script src="./resources/js/sweetalert2.all.min.js"></script>
<link rel='stylesheet' href='./resources/css/sweetalert2.min.css'>
<script src="./resources/js/main_begin_page.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@1,600&family=EB+Garamond:ital,wght@1,500&family=Roboto:wght@100&display=swap"
rel="stylesheet">
</head>
<body>
<div class="loader-page"></div>
<nav class="navbar navbar-expand-lg navbar-dark bg-color-berry-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="./resources/images/logos/favicon.png" height="28"
alt="CoolBrand">
Connaître Raspberry Pi</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="./Accueil.htm">Accueil </a> </li>
<li class="nav-item"><a class="nav-link" href="./Plan_Site.htm"> Plan du site </a></li>
<li class="nav-item"><a class="nav-link" href="./Sites_Interets.htm"> Sites d’intérêts </a></li>
<li class="nav-item"><a class="nav-link" href="./FAQ.htm"> FAQ </a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Connaître Raspberry Pi
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#histoire"> Un peu
d'histoire</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#arduino"> Arduino... Qui
est-ce ? </a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#raspberry"> Pourquoi
Raspberry Pi et non Arduino ? </a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#composeRaspberry"> Comment
se compose Raspberry Pi ? <i class="fa-solid fa-circle-chevron-right"></i> </a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw"> <i
class="fa-solid fa-circle-chevron-left"></i> Le Hardware</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_cpu">CPU/GPU</a></li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_ram">RAM</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw_usb">USB
hub</a></li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_ethernet">Ethernet</a></li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_io">I/O</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#sw"> <i
class="fa-solid fa-circle-chevron-left"></i> Le Software</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#sw_os">Système d'exploitation</a>
</li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#sw_app">Logiciel
d’applications</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#quoi_faire"> Ce que vous
pouvez faire avec le Raspberry Pi <i class="fa-solid fa-circle-chevron-right"></i>
</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#idees_Simples">Voici
quelques idées simples</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#idees_avancees">Et
pour les plus aventureux</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="./A_Propos.htm"> À propos </a></li>
<li class="nav-item"><a class="nav-link active" href=""> Contact </a></li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link sweetalert2_login" href="#"> <i
class="fa-regular fa-user"></i> Login
</a></li>
</ul>
</div>
<!-- navbar-collapse.// -->
</div>
<!-- container-fluid.// -->
</nav>
<!-- End menu (for all pages) -->
<div class="container">
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="./Accueil.htm">Accueil</a></li>
<li class="breadcrumb-item active">Contactez-nous</li>
</ol>
</nav>
<h1><i class="fa-solid fa-circle-question"></i> Contactez-nous</h1>
N’hésitez pas à communiquer en utilisant les coordonnées ci-dessous ou utiliser le formulaire ou utilisez nos
réseaux sociaux pour vous tenir au courant des nouvelles que nous y publions.
<div class="row">
<div class="col-md-6">
<div class="card">
<p class="contenedor"><img class="img-fluid imagen imagen-zoom"
src="https://www.stockvault.net/data/2018/06/27/252727/preview16.jpg" alt="">
</p>
<div class="card-body text-center">
Auteur image : <a href="https://pxhere.com/en/photographer/767067" target="_blank">mohamed
hassan</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="m-4">
<form class="needs-validation" action="#" method="post" novalidate>
<div class="row mb-3">
<label class="col-sm-3 col-form-label" for="firstName">Nom(obligatoire)</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="firstName" placeholder="Nom" required>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label" for="emailAddress">
E-mail (obligatoire)</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="emailAddress" placeholder="Email" required>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label" for="phoneNumber">Téléphone:</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="phoneNumber" placeholder="Téléphone"
required>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label" for="postalAddress">Message:</label>
<div class="col-sm-9">
<textarea rows="3" class="form-control" id="postalAddress" placeholder="Message"
required></textarea>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-9 offset-sm-3">
<button type="button" class="btn btn-primary sweetalert2_contact_form">Envoyer</button>
<input type="reset" class="btn btn-secondary ms-2" value="Reset">
</div>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 text-center">
<h5 class="text-danger">Retrouvez-nous sur nos réseaux sociaux:</h5> <br>
<p class="display-6"><a href="https://sigop.net/" target="_blank" class="me-4 text-reset"><i
class="fa-regular fa-address-card"></i></a>
<a href="https://www.linkedin.com/in/sigop" target="_blank" class="me-4 text-reset"><i
class="fab fa-linkedin"></i></a>
<a href="https://github.com/sgonzalp" target="_blank" class="me-4 text-reset"><i
class="fab fa-github"></i></a>
<a href="https://sigop.wordpress.com/" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-wordpress"></i></a> <br>
<a href="https://blog.sigop.net/" target="_blank" class="me-4 text-reset"><i
class="fa-thin fa-note"></i></a>
<a href="https://www.facebook.com/www.SiGoP.net" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-facebook-f"></i></a>
<a href="https://twitter.com/sigopnet" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-twitter"></i></a>
<a href="https://www.youtube.com/c/SigfridoGonzalezPuga" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-youtube"></i></a>
<a href="http://instagram.com/sgonzalp/" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-instagram"></i></a>
<a href="https://pinterest.com/sgonzalezpuga" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-pinterest-square"></i></a>
</p>
<div>&nbsp;</div>
<h5 class="text-success">EducaJeux inc.</h5>
<pre class="text-secondary">6255 13e Ave.,
Montréal, QC
H1X 2Y6
(514) 742 6198
it-system@sigop.net
<a href="https://school.sigop.net/EMICA/462166/" target="_blank">https://school.sigop.net/EMICA/462166/</a>
</pre>
</div>
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th>Jour</th>
<th>Nous sommes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dimanche</td>
<td>Fermé</td>
</tr>
<tr>
<td>Lundi</td>
<td>8:00 am – 3:30 pm</td>
</tr>
<tr>
<td>Mardi</td>
<td>8:00 am – 3:30 pm</td>
</tr>
<tr>
<td>Mercredi</td>
<td>8:00 am – 3:30 pm</td>
</tr>
<tr>
<td>Jeudi</td>
<td>8:00 am – 3:30 pm</td>
</tr>
<tr>
<td>Vendredi</td>
<td>8:00 am – 3:30 pm</td>
</tr>
<tr>
<td>Samedi</td>
<td>Fermé</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Footer, the same for all pages -->
<div class="w-auto p-3">
<!-- Footer -->
<footer class="text-center text-lg-start text-muted bg-color-berry-light">
<!-- Section: Social media -->
<div class="d-flex justify-content-center justify-content-lg-between p-4 txt_color_berry">
</div>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="txt_color_berry">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-lg-4 text-center" style="width: 300px;">
<div class="text-start">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-solid fa-sitemap"></i>
&nbsp;
Plan du
site</h6>
<ul class="list-unstyled">
<li class="shadow_menu"><a href="./Accueil.htm" class="underline"><i
class="fa-solid fa-house-user"></i> Accueil</a>
</li>
<li class="shadow_menu"><a href="./Plan_Site.htm" class="underline"><i
class="fa-solid fa-sitemap"></i> Plan du
site</a></li>
<li class="shadow_menu"><a href="./Sites_Interets.htm" class="underline"><i
class="fa-solid fa-book-atlas"></i> Sites
d’intérêts</a></li>
<li class="shadow_menu"><a href="./FAQ.htm" class="underline"><i
class="fa-solid fa-circle-question"></i>
FAQ</a></li>
<li class="shadow_menu"><a href="./Connaitre_Raspberry_Pi.htm" class="underline"><i
class="fa-brands fa-raspberry-pi"></i>
Connaître Raspberry Pi</a></li>
<li class="shadow_menu"><a href="./A_Propos.htm" class="underline"><i
class="fa-solid fa-circle-info"></i> À
propos</a></li>
<li class="shadow_menu"><a href="./Contact.htm" class="underline"><i
class="fa-solid fa-paper-plane"></i>
Contactez-nous</a></li>
</ul>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 text-center">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-brands fa-raspberry-pi"></i>
EducaJeux inc.</h6>
<p>MOYEN DE TÉLÉCOMMUNICATIONS</p>
<p><b>Tâche 2</b>
<br>Gr. i2013, juin 2022
<br>Sigfrido Gonzalez Puga
</p>
<hr>
<div class="row">
<div class="">
<div class="demo-content text-center">Site web réactif et compatible avec
<br> les
navigateurs les plus courants : <br> <i class="fa-brands fa-chrome"
title="Chrome"></i> <i class="fa-brands fa-opera" title="Opera"></i>
<i class="fa-brands fa-safari" title="Safari"></i> <i class="fa-brands fa-edge"
title="Edge"></i> <i class="fa-brands fa-firefox" title="Firefox"></i>
</div>
</div>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 text-center">
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-solid fa-paper-plane"></i>
Contactez-nous</h6>
<p>
<i class="fas fa-home me-3"></i> 6255 13e Ave., Montréal, QC H1X 2Y6 <br>
<i class="fas fa-envelope me-3"></i>it-system@sigop.net <br>
<i class="fas fa-phone me-3"></i> (514) 742 6198 <br>
<i class="fa-brands fa-internet-explorer"></i> <a
href="https://school.sigop.net/EMICA/462166/"
target="_blank">https://school.sigop.net/EMICA/462166/</a>
</p> <br>
<hr>
Retrouvez-nous sur nos réseaux sociaux: <br>
<a href="https://sigop.net/" target="_blank" class="me-4 text-reset"><i
class="fa-regular fa-address-card"></i></a>
<a href="https://www.linkedin.com/in/sigop" target="_blank" class="me-4 text-reset"><i
class="fab fa-linkedin"></i></a>
<a href="https://github.com/sgonzalp" target="_blank" class="me-4 text-reset"><i
class="fab fa-github"></i></a>
<a href="https://sigop.wordpress.com/" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-wordpress"></i></a>
<a href="https://blog.sigop.net/" target="_blank" class="me-4 text-reset"><i
class="fa-thin fa-note"></i></a>
<a href="https://www.facebook.com/www.SiGoP.net" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-facebook-f"></i></a>
<a href="https://twitter.com/sigopnet" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-twitter"></i></a>
<a href="https://www.youtube.com/c/SigfridoGonzalezPuga" target="_blank"
class="me-4 text-reset"><i class="fa-brands fa-youtube"></i></a>
<a href="http://instagram.com/sgonzalp/" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-instagram"></i></a>
<a href="https://pinterest.com/sgonzalezpuga" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-pinterest-square"></i></a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<div>&nbsp;</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: #44B28A; color: #FFF;">
<p>Copyright &copy; 2022 EducaJeux inc.</p>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</div>
<script src="./resources/js/main_end_page.js"></script>
<script>
document.querySelector(".sweetalert2_contact_form").addEventListener('click', function () {
swal.fire(
'Genial !',
'<label class="text-warning">Le message n\'a pas été envoyé, c\'est juste une démo.!</label>',
'success'
);
});
</script>
</body>
</html>

@ -0,0 +1,367 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Sigfrido Gonzalez Puga">
<meta name="description" content="Page d'accueil du projet Tâche 2, module 462166.">
<title>EMICA Gr, i2013 Module 462166 - 2022</title>
<link href="./resources/css/main.css" rel="stylesheet">
<link rel="stylesheet" href="./resources/css/images.css">
<link rel="shortcut icon" href="./resources/images/logos/favicon.png" type="image/png">
<script src="./resources/js/jquery.min.js"></script>
<link href="./resources/css/bootstrap.min.css" rel="stylesheet">
<script src="./resources/js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/a5f1e023c3.js" crossorigin="anonymous"></script>
<script src="./resources/js/sweetalert2.all.min.js"></script>
<link rel='stylesheet' href='./resources/css/sweetalert2.min.css'>
<script src="./resources/js/main_begin_page.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@1,600&family=EB+Garamond:ital,wght@1,500&family=Roboto:wght@100&display=swap"
rel="stylesheet">
</head>
<body>
<div class="loader-page"></div>
<nav class="navbar navbar-expand-lg navbar-dark bg-color-berry-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="./resources/images/logos/favicon.png" height="28"
alt="CoolBrand">
Connaître Raspberry Pi</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="./Accueil.htm">Accueil </a> </li>
<li class="nav-item"><a class="nav-link" href="./Plan_Site.htm"> Plan du site </a></li>
<li class="nav-item"><a class="nav-link" href="./Sites_Interets.htm"> Sites d’intérêts </a></li>
<li class="nav-item active"><a class="nav-link" href="#"> FAQ </a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Connaître Raspberry Pi
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#histoire"> Un peu
d'histoire</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#arduino"> Arduino... Qui
est-ce ? </a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#raspberry"> Pourquoi
Raspberry Pi et non Arduino ? </a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#composeRaspberry"> Comment
se compose Raspberry Pi ? <i class="fa-solid fa-circle-chevron-right"></i> </a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw"> <i
class="fa-solid fa-circle-chevron-left"></i> Le Hardware</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_cpu">CPU/GPU</a></li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_ram">RAM</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw_usb">USB
hub</a></li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_ethernet">Ethernet</a></li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_io">I/O</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#sw"> <i
class="fa-solid fa-circle-chevron-left"></i> Le Software</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#sw_os">Système d'exploitation</a>
</li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#sw_app">Logiciel
d’applications</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#quoi_faire"> Ce que vous
pouvez faire avec le Raspberry Pi <i class="fa-solid fa-circle-chevron-right"></i>
</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#idees_Simples">Voici
quelques idées simples</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#idees_avancees">Et
pour les plus aventureux</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="./A_Propos.htm"> À propos </a></li>
<li class="nav-item"><a class="nav-link" href="./Contact.htm"> Contact </a></li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link sweetalert2_login" href="#"> <i
class="fa-regular fa-user"></i> Login
</a></li>
</ul>
</div>
<!-- navbar-collapse.// -->
</div>
<!-- container-fluid.// -->
</nav>
<!-- End menu (for all pages) -->
<div class="container">
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="./Accueil.htm">Accueil</a></li>
<li class="breadcrumb-item active">FAQ</li>
</ol>
</nav>
<h1><i class="fa-solid fa-circle-question"></i> FAQ</h1>
<div class="row">
<div class="col-md-6">
<div class="card">
<p class="contenedor"><img class="img-fluid imagen imagen-rota"
src="https://c.pxhere.com/images/15/9e/01587e878689da71a669ff9b21dd-1624747.jpg!d" alt="">
</p>
<div class="card-body text-center">
Auteur image : <a href="https://pxhere.com/en/photographer/767067" target="_blank">mohamed
hassan</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="accordion" id="myAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button type="button" class="accordion-button" data-bs-toggle="collapse"
data-bs-target="#collapseOne">Une Raspberry pi est-elle chère ?</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show">
<div class="card-body">
<p>Non. Cela dépend de ce que vous voulez faire avec un Raspberry, vous pouvez obtenir
pour
quelques dollars un appareil très simple (<a
href="https://www.raspberrypi.com/products/raspberry-pi-pico/"
target="_blank">https://www.raspberrypi.com/products/raspberry-pi-pico/</a>)
jusqu'à un
appareil plus équipé et plus cher ( <a
href="https://www.raspberrypi.com/products/raspberry-pi-400/"
target="_blank">https://www.raspberrypi.com/products/raspberry-pi-400/ </a> )
</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#collapseTwo">Existe-t-il un site web ou une communauté pour apprendre à
utiliser un Raspberry ?</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse">
<div class="card-body">
<p>Bien sûr qu'il y en a. Sur le site officiel de la fondation Raspberry, dans la
section Learn
( <a href="https://www.raspberrypi.org/learn/"
target="_blank">https://www.raspberrypi.org/learn/</a> ), vous trouverez des
cours, des
clubs, des salles de formation, des concours et de nombreuses autres ressources à la
disposition du public.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#collapseThree">Est-il facile d'apprendre à utiliser et à programmer un
Raspberry ?</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse">
<div class="card-body">
<p>Cela dépend principalement de l'intérêt de chacun. Si vous avez de l'intérêt et de la
volonté, vous apprendrez très probablement à programmer un Raspberry en peu de
temps.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#collapseFour">Pourquoi choisir un Raspberry plutôt que d'autres options
?</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse">
<div class="card-body">
<p>
Raspberry n'est pas en concurrence avec d'autres options, tout dépend de
l'utilisateur et de
ses besoins. D'autres options peuvent être mieux adaptées au besoin spécifique sans
gaspiller les ressources offertes par Raspberry. Inversement, d'autres produits
peuvent ne
pas répondre au besoin, alors que Raspberry fera très bien l'affaire.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFive">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#collapseFive">Puis-je vendre mon projet sur le marché ?
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse">
<div class="card-body">
<p>
Les licences Raspberry permettent un usage personnel et éducatif sans beaucoup de
restrictions.
Toutefois, à des fins commerciales, vous devez prendre connaissance de toutes les
licences
que
votre projet utilisera et de la manière dont vous pouvez les utiliser à des fins
lucratives,
avant de commencer le développement de votre produit. <br>
<a href="https://datasheets.raspberrypi.com/licence.html"
target="_blank">https://datasheets.raspberrypi.com/licence.html</a> <br>
<a href="https://www.raspberrypi.com/licensing/"
target="_blank">https://www.raspberrypi.com/licensing/</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer, the same for all pages -->
<div class="w-auto p-3">
<!-- Footer -->
<footer class="text-center text-lg-start text-muted bg-color-berry-light">
<!-- Section: Social media -->
<div class="d-flex justify-content-center justify-content-lg-between p-4 txt_color_berry">
</div>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="txt_color_berry">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-lg-4 text-center" style="width: 300px;">
<div class="text-start">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-solid fa-sitemap"></i>
&nbsp;
Plan du
site</h6>
<ul class="list-unstyled">
<li class="shadow_menu"><a href="./Accueil.htm" class="underline"><i
class="fa-solid fa-house-user"></i> Accueil</a>
</li>
<li class="shadow_menu"><a href="./Plan_Site.htm" class="underline"><i
class="fa-solid fa-sitemap"></i> Plan du
site</a></li>
<li class="shadow_menu"><a href="./Sites_Interets.htm" class="underline"><i
class="fa-solid fa-book-atlas"></i> Sites
d’intérêts</a></li>
<li class="shadow_menu"><a href="./FAQ.htm" class="underline"><i
class="fa-solid fa-circle-question"></i>
FAQ</a></li>
<li class="shadow_menu"><a href="./Connaitre_Raspberry_Pi.htm" class="underline"><i
class="fa-brands fa-raspberry-pi"></i>
Connaître Raspberry Pi</a></li>
<li class="shadow_menu"><a href="./A_Propos.htm" class="underline"><i
class="fa-solid fa-circle-info"></i> À
propos</a></li>
<li class="shadow_menu"><a href="./Contact.htm" class="underline"><i
class="fa-solid fa-paper-plane"></i>
Contactez-nous</a></li>
</ul>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 text-center">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-brands fa-raspberry-pi"></i>
EducaJeux inc.</h6>
<p>MOYEN DE TÉLÉCOMMUNICATIONS</p>
<p><b>Tâche 2</b>
<br>Gr. i2013, juin 2022
<br>Sigfrido Gonzalez Puga
</p>
<hr>
<div class="row">
<div class="">
<div class="demo-content text-center">Site web réactif et compatible avec <br> les
navigateurs les plus courants : <br> <i class="fa-brands fa-chrome"
title="Chrome"></i> <i class="fa-brands fa-opera" title="Opera"></i> <i
class="fa-brands fa-safari" title="Safari"></i> <i class="fa-brands fa-edge"
title="Edge"></i> <i class="fa-brands fa-firefox" title="Firefox"></i></div>
</div>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 text-center">
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-solid fa-paper-plane"></i>
Contactez-nous</h6>
<p>
<i class="fas fa-home me-3"></i> 6255 13e Ave., Montréal, QC H1X 2Y6 <br>
<i class="fas fa-envelope me-3"></i>it-system@sigop.net <br>
<i class="fas fa-phone me-3"></i> (514) 742 6198 <br>
<i class="fa-brands fa-internet-explorer"></i> <a
href="https://school.sigop.net/EMICA/462166/"
target="_blank">https://school.sigop.net/EMICA/462166/</a>
</p> <br>
<hr>
Retrouvez-nous sur nos réseaux sociaux: <br>
<a href="https://sigop.net/" target="_blank" class="me-4 text-reset"><i
class="fa-regular fa-address-card"></i></a>
<a href="https://www.linkedin.com/in/sigop" target="_blank" class="me-4 text-reset"><i
class="fab fa-linkedin"></i></a>
<a href="https://github.com/sgonzalp" target="_blank" class="me-4 text-reset"><i
class="fab fa-github"></i></a>
<a href="https://sigop.wordpress.com/" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-wordpress"></i></a>
<a href="https://blog.sigop.net/" target="_blank" class="me-4 text-reset"><i
class="fa-thin fa-note"></i></a>
<a href="https://www.facebook.com/www.SiGoP.net" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-facebook-f"></i></a>
<a href="https://twitter.com/sigopnet" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-twitter"></i></a>
<a href="https://www.youtube.com/c/SigfridoGonzalezPuga" target="_blank"
class="me-4 text-reset"><i class="fa-brands fa-youtube"></i></a>
<a href="http://instagram.com/sgonzalp/" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-instagram"></i></a>
<a href="https://pinterest.com/sgonzalezpuga" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-pinterest-square"></i></a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<div>&nbsp;</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: #44B28A; color: #FFF;">
<p>Copyright &copy; 2022 EducaJeux inc.</p>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</div>
<script src="./resources/js/main_end_page.js"></script>
</body>
</html>

@ -0,0 +1,460 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Sigfrido Gonzalez Puga">
<meta name="description" content="Plan du Site du projet Tâche 2, module 462166.">
<title>EMICA Gr, i2013 Module 462166 - 2022</title>
<link href="./resources/css/main.css" rel="stylesheet">
<link rel="shortcut icon" href="./resources/images/logos/favicon.png" type="image/png">
<script src="./resources/js/jquery.min.js"></script>
<link href="./resources/css/bootstrap.min.css" rel="stylesheet">
<script src="./resources/js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/a5f1e023c3.js" crossorigin="anonymous"></script>
<script src="./resources/js/sweetalert2.all.min.js"></script>
<link rel='stylesheet' href='./resources/css/sweetalert2.min.css'>
<script src="./resources/js/main_begin_page.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="./resources/css/timeline.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@1,600&family=EB+Garamond:ital,wght@1,500&family=Roboto:wght@100&display=swap"
rel="stylesheet">
</head>
<body>
<div class="loader-page"></div>
<nav class="navbar navbar-expand-lg navbar-dark bg-color-berry-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="./resources/images/logos/favicon.png" height="28" alt="CoolBrand">
Connaître Raspberry Pi</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="./Accueil.htm">Accueil </a> </li>
<li class="nav-item active"><a class="nav-link" href="./Plan_Site.htm"> Plan du site </a></li>
<li class="nav-item"><a class="nav-link" href="./Sites_Interets.htm"> Sites d’intérêts </a></li>
<li class="nav-item"><a class="nav-link" href="./FAQ.htm"> FAQ </a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Connaître Raspberry Pi
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#histoire"> Un peu
d'histoire</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#arduino"> Arduino... Qui
est-ce ? </a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#raspberry"> Pourquoi
Raspberry Pi et non Arduino ? </a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#composeRaspberry"> Comment
se compose Raspberry Pi ? <i class="fa-solid fa-circle-chevron-right"></i> </a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw"> <i
class="fa-solid fa-circle-chevron-left"></i> Le Hardware</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw_cpu">CPU/GPU</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw_ram">RAM</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw_usb">USB
hub</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw_ethernet">Ethernet</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw_io">I/O</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#sw"> <i
class="fa-solid fa-circle-chevron-left"></i> Le Software</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#sw_os">Système d'exploitation</a>
</li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#sw_app">Logiciel
d’applications</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#quoi_faire"> Ce que vous
pouvez faire avec le Raspberry Pi <i class="fa-solid fa-circle-chevron-right"></i>
</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#idees_Simples">Voici
quelques idées simples</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#idees_avancees">Et
pour les plus aventureux</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="./A_Propos.htm"> À propos </a></li>
<li class="nav-item"><a class="nav-link" href="./Contact.htm"> Contact </a></li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link sweetalert2_login" href="#"> <i class="fa-regular fa-user"></i> Login
</a></li>
</ul>
</div>
<!-- navbar-collapse.// -->
</div>
<!-- container-fluid.// -->
</nav>
<!-- End menu (for all pages) -->
<div class="container">
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="./Accueil.htm">Accueil</a></li>
<li class="breadcrumb-item active">Plan du site</li>
</ol>
</nav>
<section class="timeline_area section_padding_130">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm-8 col-lg-6">
<!-- Section Heading-->
<div class="section_heading text-center">
<h1><i class="fa-solid fa-sitemap"></i> Plan du Site</h1>
<h3><i class="fa-brands fa-raspberry-pi"></i> Connaître Raspberry Pi</h3>
<div class="line"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<!-- Timeline Area-->
<div class="apland-timeline-area">
<!-- Single Timeline Content-->
<div class="single-timeline-area">
<div class="timeline-date wow fadeInLeft" data-wow-delay="0.1s"
style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInLeft;">
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="single-timeline-content d-flex wow fadeInLeft" data-wow-delay="0.7s"
style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInLeft;">
<div class="timeline-icon"><i class="fa-solid fa-house-user"></i></div>
<div class="timeline-text">
<h6>Accueil</h6>
<p>Page d'accueil</p>
<p class="text-start"><a href="./Accueil.htm" target="_self" class="btn btn-info btn-small">
Visiter <i class="fa-solid fa-link"></i></a></p>
</div>
</div>
</div>
</div>
</div>
<!-- Single Timeline Content-->
<div class="single-timeline-area">
<div class="timeline-date wow fadeInLeft" data-wow-delay="0.1s"
style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInLeft;">
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="single-timeline-content d-flex wow fadeInLeft" data-wow-delay="0.3s"
style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInLeft;">
<div class="timeline-icon"><i class="fa-solid fa-sitemap"></i></div>
<div class="timeline-text">
<h6>Plan du Site</h6>
<p>Voir Plan du site</p>
<p class="text-start"><a href="./Plan_Site.htm" target="_self" class="btn btn-info btn-small">
Visiter <i class="fa-solid fa-link"></i></a></p>
</div>
</div>
</div>
</div>
</div>
<!-- Single Timeline Content-->
<div class="single-timeline-area">
<div class="timeline-date wow fadeInLeft" data-wow-delay="0.1s"
style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInLeft;">
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="single-timeline-content d-flex wow fadeInLeft" data-wow-delay="0.3s"
style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInLeft;">
<div class="timeline-icon"><i class="fa-solid fa-book-atlas"></i></div>
<div class="timeline-text">
<h6>Sites d’intérêts</h6>
<p>Visiter les sites de consultation</p>
<p class="text-start"><a href="./Sites_Interets.htm" target="_self"
class="btn btn-info btn-small"> Visiter <i class="fa-solid fa-link"></i></a></p>
</div>
</div>
</div>
</div>
</div>
<!-- Single Timeline Content-->
<div class="single-timeline-area">
<div class="timeline-date wow fadeInLeft" data-wow-delay="0.1s"
style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInLeft;">
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="single-timeline-content d-flex wow fadeInLeft" data-wow-delay="0.3s"
style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInLeft;">
<div class="timeline-icon"><i class="fa-solid fa-circle-question"></i></div>
<div class="timeline-text">
<h6>FAQ</h6>
<p>Foire aux questions</p>
<p class="text-start"><a href="./FAQ.htm" target="_self" class="btn btn-info btn-small"> Visiter
<i class="fa-solid fa-link"></i></a></p>
</div>
</div>
</div>
</div>
</div>
<!-- Single Timeline Content-->
<div class="single-timeline-area">
<div class="timeline-date wow fadeInLeft" data-wow-delay="0.1s"
style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInLeft;">
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="single-timeline-content d-flex wow fadeInLeft" data-wow-delay="0.3s"
style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInLeft;">
<div class="timeline-icon"><i class="fa-solid fa-circle-info"></i></div>
<div class="timeline-text">
<h6>À propos</h6>
<p class="text-start"><a href="./A_Propos.htm" target="_self" class="btn btn-info btn-small">
Visiter <i class="fa-solid fa-link"></i></a></p>
</div>
</div>
</div>
</div>
</div>
<!-- Single Timeline Content-->
<div class="single-timeline-area">
<div class="timeline-date wow fadeInLeft" data-wow-delay="0.1s"
style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInLeft;">
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="single-timeline-content d-flex wow fadeInLeft" data-wow-delay="0.3s"
style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInLeft;">
<div class="timeline-icon"><i class="fa-brands fa-raspberry-pi"></i></div>
<div class="timeline-text">
<h6>Connaître Raspberry Pi</h6>
<ul>
<li><a href="./Connaitre_Raspberry_Pi.htm#histoire" class="text-reset">Un peu d'histoire</a>
</li>
<li><a href="./Connaitre_Raspberry_Pi.htm#arduino" class="text-reset">Arduino... Qui est-ce
?</a></li>
<li><a href="./Connaitre_Raspberry_Pi.htm#raspberry" class="text-reset">Pourquoi Raspberry Pi
et non Arduino ?</a></li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="single-timeline-content d-flex wow fadeInLeft" data-wow-delay="0.5s"
style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInLeft;">
<div class="timeline-icon"><i class="fa-solid fa-microchip"></i></div>
<div class="timeline-text">
<h6>Comment se compose Raspberry Pi ?</h6>
<ul>
<li>Le Hardware
<ul>
<li><a href="./Connaitre_Raspberry_Pi.htm#hw_cpu" class="text-reset">CPU/GPU</a></li>
<li><a href="./Connaitre_Raspberry_Pi.htm#hw_ram" class="text-reset">RAM</a></li>
<li><a href="./Connaitre_Raspberry_Pi.htm#hw_usb" class="text-reset">USB hub</a></li>
<li><a href="./Connaitre_Raspberry_Pi.htm#hw_ethernet" class="text-reset">Ethernet</a>
</li>
<li><a href="./Connaitre_Raspberry_Pi.htm#hw_io" class="text-reset">I/O</a></li>
</ul>
</li>
<li>Le Software
<ul>
<li><a href="./Connaitre_Raspberry_Pi.htm#sw_os" class="text-reset">Système
d'exploitation</a></li>
<li><a href="./Connaitre_Raspberry_Pi.htm#sw_app" class="text-reset">Logiciel
d’applications</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="single-timeline-content d-flex wow fadeInLeft" data-wow-delay="0.7s"
style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInLeft;">
<div class="timeline-icon"><i class="fa-solid fa-atom"></i></div>
<div class="timeline-text">
<h6>Ce que vous pouvez faire avec le Raspberry Pi</h6>
<ul>
<li><a href="./Connaitre_Raspberry_Pi.htm#idees_Simples" class="text-reset">Voici quelques
idées simples</a></li>
<li><a href="./Connaitre_Raspberry_Pi.htm#idees_avancees" class="text-reset">Et pour les plus
aventureux</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Single Timeline Content-->
<div class="single-timeline-area">
<div class="timeline-date wow fadeInLeft" data-wow-delay="0.1s"
style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInLeft;">
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="single-timeline-content d-flex wow fadeInLeft" data-wow-delay="0.3s"
style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInLeft;">
<div class="timeline-icon"><i class="fa-solid fa-paper-plane"></i></div>
<div class="timeline-text">
<h6>Contactez-nous</h6>
<p>Communiquer avec Nous</p>
<p class="text-start"><a href="./Contact.htm" target="_self" class="btn btn-info btn-small">
Visiter
<i class="fa-solid fa-link"></i></a></p>
</div>
</div>
</div>
</div>
</div>
<!-- Single Timeline Content-->
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Footer, the same for all pages -->
<div class="w-auto p-3">
<!-- Footer -->
<footer class="text-center text-lg-start text-muted bg-color-berry-light">
<!-- Section: Social media -->
<div class="d-flex justify-content-center justify-content-lg-between p-4 txt_color_berry">
</div>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="txt_color_berry">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-lg-4 text-center" style="width: 300px;">
<div class="text-start">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-solid fa-sitemap"></i>
&nbsp;
Plan du
site</h6>
<ul class="list-unstyled">
<li class="shadow_menu"><a href="./Accueil.htm" class="underline"><i
class="fa-solid fa-house-user"></i> Accueil</a>
</li>
<li class="shadow_menu"><a href="./Plan_Site.htm" class="underline"><i
class="fa-solid fa-sitemap"></i> Plan du
site</a></li>
<li class="shadow_menu"><a href="./Sites_Interets.htm" class="underline"><i
class="fa-solid fa-book-atlas"></i> Sites
d’intérêts</a></li>
<li class="shadow_menu"><a href="./FAQ.htm" class="underline"><i
class="fa-solid fa-circle-question"></i>
FAQ</a></li>
<li class="shadow_menu"><a href="./Connaitre_Raspberry_Pi.htm" class="underline"><i
class="fa-brands fa-raspberry-pi"></i>
Connaître Raspberry Pi</a></li>
<li class="shadow_menu"><a href="./A_Propos.htm" class="underline"><i
class="fa-solid fa-circle-info"></i> À
propos</a></li>
<li class="shadow_menu"><a href="./Contact.htm" class="underline"><i
class="fa-solid fa-paper-plane"></i>
Contactez-nous</a></li>
</ul>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 text-center">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-brands fa-raspberry-pi"></i>
EducaJeux inc.</h6>
<p>MOYEN DE TÉLÉCOMMUNICATIONS</p>
<p><b>Tâche 2</b>
<br>Gr. i2013, juin 2022
<br>Sigfrido Gonzalez Puga
</p>
<hr>
<div class="row">
<div class="">
<div class="demo-content text-center">Site web réactif et compatible avec <br> les
navigateurs les plus courants : <br> <i class="fa-brands fa-chrome" title="Chrome"></i> <i
class="fa-brands fa-opera" title="Opera"></i> <i class="fa-brands fa-safari" title="Safari"></i>
<i class="fa-brands fa-edge" title="Edge"></i> <i class="fa-brands fa-firefox" title="Firefox"></i>
</div>
</div>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 text-center">
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-solid fa-paper-plane"></i>
Contactez-nous</h6>
<p>
<i class="fas fa-home me-3"></i> 6255 13e Ave., Montréal, QC H1X 2Y6 <br>
<i class="fas fa-envelope me-3"></i>it-system@sigop.net <br>
<i class="fas fa-phone me-3"></i> (514) 742 6198 <br>
<i class="fa-brands fa-internet-explorer"></i> <a href="https://school.sigop.net/EMICA/462166/"
target="_blank">https://school.sigop.net/EMICA/462166/</a>
</p> <br>
<hr>
Retrouvez-nous sur nos réseaux sociaux: <br>
<a href="https://sigop.net/" target="_blank" class="me-4 text-reset"><i
class="fa-regular fa-address-card"></i></a>
<a href="https://www.linkedin.com/in/sigop" target="_blank" class="me-4 text-reset"><i
class="fab fa-linkedin"></i></a>
<a href="https://github.com/sgonzalp" target="_blank" class="me-4 text-reset"><i
class="fab fa-github"></i></a>
<a href="https://sigop.wordpress.com/" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-wordpress"></i></a>
<a href="https://blog.sigop.net/" target="_blank" class="me-4 text-reset"><i
class="fa-thin fa-note"></i></a>
<a href="https://www.facebook.com/www.SiGoP.net" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-facebook-f"></i></a>
<a href="https://twitter.com/sigopnet" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-twitter"></i></a>
<a href="https://www.youtube.com/c/SigfridoGonzalezPuga" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-youtube"></i></a>
<a href="http://instagram.com/sgonzalp/" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-instagram"></i></a>
<a href="https://pinterest.com/sgonzalezpuga" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-pinterest-square"></i></a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<div>&nbsp;</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: #44B28A; color: #FFF;">
<p>Copyright &copy; 2022 EducaJeux inc.</p>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</div>
<script src="./resources/js/main_end_page.js"></script>
</body>
</html>

@ -0,0 +1,392 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Sigfrido Gonzalez Puga">
<meta name="description" content="Page d'accueil du projet Tâche 2, module 462166.">
<title>EMICA Gr, i2013 Module 462166 - 2022</title>
<link href="./resources/css/main.css" rel="stylesheet">
<link rel="stylesheet" href="./resources/css/images.css">
<link rel="shortcut icon" href="./resources/images/logos/favicon.png" type="image/png">
<script src="./resources/js/jquery.min.js"></script>
<link href="./resources/css/bootstrap.min.css" rel="stylesheet">
<script src="./resources/js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/a5f1e023c3.js" crossorigin="anonymous"></script>
<script src="./resources/js/sweetalert2.all.min.js"></script>
<link rel='stylesheet' href='./resources/css/sweetalert2.min.css'>
<script src="./resources/js/main_begin_page.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@1,600&family=EB+Garamond:ital,wght@1,500&family=Roboto:wght@100&display=swap"
rel="stylesheet">
</head>
<body>
<div class="loader-page"></div>
<nav class="navbar navbar-expand-lg navbar-dark bg-color-berry-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="./resources/images/logos/favicon.png" height="28"
alt="CoolBrand">
Connaître Raspberry Pi</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="./Accueil.htm">Accueil </a> </li>
<li class="nav-item"><a class="nav-link" href="./Plan_Site.htm"> Plan du site </a></li>
<li class="nav-item active"><a class="nav-link" href="#"> Sites d’intérêts </a></li>
<li class="nav-item"><a class="nav-link" href="./FAQ.htm"> FAQ </a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Connaître Raspberry Pi
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#histoire"> Un peu
d'histoire</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#arduino"> Arduino... Qui
est-ce ? </a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#raspberry"> Pourquoi
Raspberry Pi et non Arduino ? </a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#composeRaspberry"> Comment
se compose Raspberry Pi ? <i class="fa-solid fa-circle-chevron-right"></i> </a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw"> <i
class="fa-solid fa-circle-chevron-left"></i> Le Hardware</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_cpu">CPU/GPU</a></li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_ram">RAM</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw_usb">USB
hub</a></li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_ethernet">Ethernet</a></li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#hw_io">I/O</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#sw"> <i
class="fa-solid fa-circle-chevron-left"></i> Le Software</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#sw_os">Système d'exploitation</a>
</li>
<li><a class="dropdown-item"
href="./Connaitre_Raspberry_Pi.htm#sw_app">Logiciel
d’applications</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#quoi_faire"> Ce que vous
pouvez faire avec le Raspberry Pi <i class="fa-solid fa-circle-chevron-right"></i>
</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#idees_Simples">Voici
quelques idées simples</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#idees_avancees">Et
pour les plus aventureux</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="./A_Propos.htm"> À propos </a></li>
<li class="nav-item"><a class="nav-link" href="./Contact.htm"> Contact </a></li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link sweetalert2_login" href="#"> <i
class="fa-regular fa-user"></i> Login
</a></li>
</ul>
</div>
<!-- navbar-collapse.// -->
</div>
<!-- container-fluid.// -->
</nav>
<!-- End menu (for all pages) -->
<div class="container">
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="./Accueil.htm">Accueil</a></li>
<li class="breadcrumb-item active">Sites d'intérêts</li>
</ol>
</nav>
<h1><i class="fa-solid fa-book-atlas"></i> Sites d’intérêts</h1>
<div class="row">
<div class="col-md-6">
<div class="card">
<p class="contenedor"><img class="img-fluid imagen imagen-blur imagen-slide"
src="https://live.staticflickr.com/6114/6292448083_ea935f5015_b.jpg" alt="">
</p>
<div class="card-body text-center">
Auteur image : <a href="https://www.flickr.com/photos/myf/" target="_blank">sleepymyf</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a target="_blank"
href="https://www.raspberrypi.org/">https://www.raspberrypi.org/</a></td>
</tr>
<tr>
<td>2</td>
<td><a target="_blank"
href="https://fr.wikipedia.org/wiki/Raspberry_Pi">https://fr.wikipedia.org/wiki/Raspberry_Pi</a>
</td>
</tr>
<tr>
<td>3</td>
<td><a target="_blank"
href="https://www.buyapi.ca/product/raspberry-pi-4-model-b-2gb/?src=raspberrypi">https://www.buyapi.ca/product/raspberry-pi-4-model-b-2gb/?src=raspberrypi</a>
</td>
</tr>
<tr>
<td>4</td>
<td><a target="_blank"
href="https://nacholoop.github.io/enigma/anexo1.html">https://nacholoop.github.io/enigma/anexo1.html</a>
</td>
</tr>
<tr>
<td>5</td>
<td><a target="_blank"
href="https://codigomaquina.es/empezar-con-raspberry-pi/">https://codigomaquina.es/empezar-con-raspberry-pi/</a>
</td>
</tr>
<tr>
<td>6</td>
<td><a target="_blank"
href="https://www.xataka.com/makers/cero-maker-todo-necesario-para-empezar-raspberry-pi">https://www.xataka.com/makers/cero-maker-todo-necesario-para-empezar-raspberry-pi</a>
</td>
</tr>
<tr>
<td>7</td>
<td><a target="_blank"
href="https://www.arduino.cc/en/Main/Products">https://www.arduino.cc/en/Main/Products</a>
</td>
</tr>
<tr>
<td>8</td>
<td><a target="_blank"
href="https://codigomaquina.es/que-es-arduino/?related_post_from=50">https://codigomaquina.es/que-es-arduino/?related_post_from=50</a>
</td>
</tr>
<tr>
<td>9</td>
<td><a target="_blank"
href="https://www.electronicshub.org/raspberry-pi-vs-arduino/">https://www.electronicshub.org/raspberry-pi-vs-arduino/</a>
</td>
</tr>
<tr>
<td>10</td>
<td><a target="_blank"
href="https://www.xataka.com/basics/arduino-raspberry-pi-que-cuales-sus-diferencias">https://www.xataka.com/basics/arduino-raspberry-pi-que-cuales-sus-diferencias</a>
</td>
</tr>
<tr>
<td>11</td>
<td><a target="_blank"
href="https://www.softzone.es/programas/sistema/mejores-programas-raspberry-pi/">https://www.softzone.es/programas/sistema/mejores-programas-raspberry-pi/</a>
</tr>
<tr>
<td>12</td>
<td><a target="_blank" href="https://scratch.mit.edu/">https://scratch.mit.edu/</a></td>
</tr>
<tr>
<td>13</td>
<td><a target="_blank"
href="http://lightberry.eu/#let-the-lightberry-speak-for-itself">http://lightberry.eu/#let-the-lightberry-speak-for-itself</a>
</td>
</tr>
<tr>
<td>14</td>
<td><a target="_blank"
href="https://www.raspberrypi.org/blog/piphone-home-made-raspberry-pi-smartphone/">https://www.raspberrypi.org/blog/piphone-home-made-raspberry-pi-smartphone/</a>
</td>
</tr>
<tr>
<td>15</td>
<td><a target="_blank"
href="https://www.instructables.com/Raspberry-Pi-Internet-Weather-Station/">https://www.instructables.com/Raspberry-Pi-Internet-Weather-Station/</a>
</td>
</tr>
<tr>
<td>16</td>
<td><a target="_blank"
href="https://learn.adafruit.com/piphone-a-raspberry-pi-based-cellphone">https://learn.adafruit.com/piphone-a-raspberry-pi-based-cellphone</a>
</td>
</tr>
<tr>
<td>17</td>
<td><a target="_blank"
href="http://www.icrobotics.co.uk/wiki/index.php/Turning_the_Raspberry_Pi_Into_an_FM_Transmitter">http://www.icrobotics.co.uk/wiki/index.php/Turning_the_Raspberry_Pi_Into_an_FM_Transmitter</a>
</td>
</tr>
<tr>
<td>18</td>
<td><a target="_blank"
href="https://www.instructables.com/Raspberry-Pi-as-low-cost-HD-surveillance-camera/">https://www.instructables.com/Raspberry-Pi-as-low-cost-HD-surveillance-camera/</a>
</td>
</tr>
<tr>
<td>19</td>
<td><a target="_blank"
href="https://projects.raspberrypi.org/en">https://projects.raspberrypi.org/en</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Footer, the same for all pages -->
<div class="w-auto p-3">
<!-- Footer -->
<footer class="text-center text-lg-start text-muted bg-color-berry-light">
<!-- Section: Social media -->
<div class="d-flex justify-content-center justify-content-lg-between p-4 txt_color_berry">
</div>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="txt_color_berry">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-lg-4 text-center" style="width: 300px;">
<div class="text-start">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-solid fa-sitemap"></i>
&nbsp;
Plan du
site</h6>
<ul class="list-unstyled">
<li class="shadow_menu"><a href="./Accueil.htm" class="underline"><i
class="fa-solid fa-house-user"></i> Accueil</a>
</li>
<li class="shadow_menu"><a href="./Plan_Site.htm" class="underline"><i
class="fa-solid fa-sitemap"></i> Plan du
site</a></li>
<li class="shadow_menu"><a href="./Sites_Interets.htm" class="underline"><i
class="fa-solid fa-book-atlas"></i> Sites
d’intérêts</a></li>
<li class="shadow_menu"><a href="./FAQ.htm" class="underline"><i
class="fa-solid fa-circle-question"></i>
FAQ</a></li>
<li class="shadow_menu"><a href="./Connaitre_Raspberry_Pi.htm" class="underline"><i
class="fa-brands fa-raspberry-pi"></i>
Connaître Raspberry Pi</a></li>
<li class="shadow_menu"><a href="./A_Propos.htm" class="underline"><i
class="fa-solid fa-circle-info"></i> À
propos</a></li>
<li class="shadow_menu"><a href="./Contact.htm" class="underline"><i
class="fa-solid fa-paper-plane"></i>
Contactez-nous</a></li>
</ul>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 text-center">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-brands fa-raspberry-pi"></i>
EducaJeux inc.</h6>
<p>MOYEN DE TÉLÉCOMMUNICATIONS</p>
<p><b>Tâche 2</b>
<br>Gr. i2013, juin 2022
<br>Sigfrido Gonzalez Puga
</p>
<hr>
<div class="row">
<div class="">
<div class="demo-content text-center">Site web réactif et compatible avec <br> les
navigateurs les plus courants : <br> <i class="fa-brands fa-chrome"
title="Chrome"></i> <i class="fa-brands fa-opera" title="Opera"></i> <i
class="fa-brands fa-safari" title="Safari"></i> <i class="fa-brands fa-edge"
title="Edge"></i> <i class="fa-brands fa-firefox" title="Firefox"></i></div>
</div>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 text-center">
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-solid fa-paper-plane"></i>
Contactez-nous</h6>
<p>
<i class="fas fa-home me-3"></i> 6255 13e Ave., Montréal, QC H1X 2Y6 <br>
<i class="fas fa-envelope me-3"></i>it-system@sigop.net <br>
<i class="fas fa-phone me-3"></i> (514) 742 6198 <br>
<i class="fa-brands fa-internet-explorer"></i> <a
href="https://school.sigop.net/EMICA/462166/"
target="_blank">https://school.sigop.net/EMICA/462166/</a>
</p> <br>
<hr>
Retrouvez-nous sur nos réseaux sociaux: <br>
<a href="https://sigop.net/" target="_blank" class="me-4 text-reset"><i
class="fa-regular fa-address-card"></i></a>
<a href="https://www.linkedin.com/in/sigop" target="_blank" class="me-4 text-reset"><i
class="fab fa-linkedin"></i></a>
<a href="https://github.com/sgonzalp" target="_blank" class="me-4 text-reset"><i
class="fab fa-github"></i></a>
<a href="https://sigop.wordpress.com/" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-wordpress"></i></a>
<a href="https://blog.sigop.net/" target="_blank" class="me-4 text-reset"><i
class="fa-thin fa-note"></i></a>
<a href="https://www.facebook.com/www.SiGoP.net" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-facebook-f"></i></a>
<a href="https://twitter.com/sigopnet" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-twitter"></i></a>
<a href="https://www.youtube.com/c/SigfridoGonzalezPuga" target="_blank"
class="me-4 text-reset"><i class="fa-brands fa-youtube"></i></a>
<a href="http://instagram.com/sgonzalp/" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-instagram"></i></a>
<a href="https://pinterest.com/sgonzalezpuga" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-pinterest-square"></i></a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<div>&nbsp;</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: #44B28A; color: #FFF;">
<p>Copyright &copy; 2022 EducaJeux inc.</p>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</div>
<script src="./resources/js/main_end_page.js"></script>
</body>
</html>

@ -0,0 +1,329 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Sigfrido Gonzalez Puga">
<meta name="description" content="Page d'accueil du projet Tâche 2, module 462166.">
<title>EMICA Gr, i2013 Module 462166 - 2022</title>
<link href="./resources/css/main.css" rel="stylesheet">
<link rel="stylesheet" href="./resources/css/images.css">
<link rel="shortcut icon" href="./resources/images/logos/favicon.png" type="image/png">
<script src="./resources/js/jquery.min.js"></script>
<link href="./resources/css/bootstrap.min.css" rel="stylesheet">
<script src="./resources/js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/a5f1e023c3.js" crossorigin="anonymous"></script>
<script src="./resources/js/sweetalert2.all.min.js"></script>
<link rel='stylesheet' href='./resources/css/sweetalert2.min.css'>
<script src="./resources/js/main_begin_page.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@1,600&family=EB+Garamond:ital,wght@1,500&family=Roboto:wght@100&display=swap"
rel="stylesheet">
</head>
<body>
<div class="loader-page"></div>
<nav class="navbar navbar-expand-lg navbar-dark bg-color-berry-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="./resources/images/logos/favicon.png" height="28" alt="CoolBrand">
Connaître Raspberry Pi</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Accueil </a> </li>
<li class="nav-item"><a class="nav-link" href="./Plan_Site.htm"> Plan du site </a></li>
<li class="nav-item"><a class="nav-link" href="./Sites_Interets.htm"> Sites d’intérêts </a></li>
<li class="nav-item"><a class="nav-link" href="./FAQ.htm"> FAQ </a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Connaître Raspberry Pi </a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#histoire"> Un peu d'histoire</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#arduino"> Arduino... Qui est-ce ? </a>
</li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#raspberry"> Pourquoi Raspberry Pi et non
Arduino ? </a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#composeRaspberry"> Comment se compose
Raspberry Pi ? <i class="fa-solid fa-circle-chevron-right"></i> </a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw"> <i
class="fa-solid fa-circle-chevron-left"></i> Le Hardware</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw_cpu">CPU/GPU</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw_ram">RAM</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw_usb">USB hub</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw_ethernet">Ethernet</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#hw_io">I/O</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#sw"> <i
class="fa-solid fa-circle-chevron-left"></i> Le Software</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#sw_os">Système d'exploitation</a>
</li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#sw_app">Logiciel
d’applications</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#quoi_faire"> Ce que vous pouvez faire avec
le Raspberry Pi <i class="fa-solid fa-circle-chevron-right"></i> </a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#idees_Simples">Voici quelques idées
simples</a></li>
<li><a class="dropdown-item" href="./Connaitre_Raspberry_Pi.htm#idees_avancees">Et pour les plus
aventureux</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="./A_Propos.htm"> À propos </a></li>
<li class="nav-item"><a class="nav-link" href="./Contact.htm"> Contact </a></li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link sweetalert2_login" href="#"> <i class="fa-regular fa-user"></i> Login
</a></li>
</ul>
</div>
<!-- navbar-collapse.// -->
</div>
<!-- container-fluid.// -->
</nav>
<!-- Warning Alert only in Home page -->
<div class="alert alert-warning alert-dismissible fade show">
<strong>Attention!</strong> Veuillez noter qu'il s'agit d'un travail en cours.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<!-- End menu (for all pages) -->
<div class="container">
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item active">Accueil</li>
</ol>
</nav>
<div class="p-5 my-4 bg-color-berry-normal rounded-5">
<div class="row">
<div class="col-md-8">
<h1><i class="fa-brands fa-raspberry-pi"></i> Connaître Raspberry Pi</h1>
&nbsp;
<p class="lead">Des cours d'informatique peuvent être dispensés aux personnes qui n'ont pas les moyens
d'acheter du matériel informatique coûteux. Il existe de nombreuses alternatives, certaines plus adaptées,
d'autres plus économiques et d'autres plus chers.</p>
<p>S'il est vrai que le Raspberry Pi n'est pas exactement gratuit car vous devez acheter la carte et certains
composants, il constitue une très bonne alternative.</p>
<p class="text-center"><a href="./Connaitre_Raspberry_Pi.htm" target="_self"
class="btn btn-success btn-lg">Alonz-y!</a></p>
</div>
<div class="col-md-4">
<div class="berry_contenedor">
<img src="./resources/images/RaspberryPi/475px-Raspberry_Pi_Logo.svg.png" width="200" alt="" />
<img class="top" src="./resources/images/RaspberryPi/475px-Raspberry_Pi_Logo.png" width="200" alt="" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" style="background-color:#abc9be;">Éducation</a>
</li>
</ul>
&nbsp;
<p>Dans les écoles d'éducation de base, ils pourraient donner des ateliers qui enseignent l'informatique. Et
toujours en tirant le meilleur parti de chaque élément logiciel et matériel, en gardant à l'esprit le
Raspberry
Pi et sa bonté pour pouvoir assembler, observer, configurer, installer et développer avec cette petite carte.
</p>
<p class="text-center"><a href="https://www.raspberrypi.org/learn/" target="_blank" class="btn btn-success ">En
savoir plus
&raquo;</a></p>
</div>
<div class="col-md-4">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" style="background-color:#b082af;">Imagination</a>
</li>
</ul>
&nbsp;
<div class="objetfitcover cont_tit_img">
<a class="sweetalert2_video_player" href="#">
<img class="img-fluid imagen imagen-blur"
src="https://cdn.pixabay.com/photo/2020/11/22/04/10/youtube-5765608_960_720.png" alt=""></a>
</div>
</div>
<div class="col-md-4">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" style="background-color:#d7d48f;">Curiosité</a>
</li>
</ul>
&nbsp;
<p>Il est essentiel d'encourager la curiosité et de développer l'ingéniosité, mais il est essentiel de disposer
d'une bonne base de connaissances afin d'obtenir un résultat optimal et de ne pas se décourager dans la
tentative.</p>
<p class="text-center"><a href="https://projects.raspberrypi.org/en" target="_blank" class="btn btn-success">En
savoir plus
&raquo;</a></p>
</div>
</div>
</div>
<!-- Footer, the same for all pages -->
<div class="w-auto p-3">
<!-- Footer -->
<footer class="text-center text-lg-start text-muted bg-color-berry-light">
<!-- Section: Social media -->
<div class="d-flex justify-content-center justify-content-lg-between p-4 txt_color_berry">
</div>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="txt_color_berry">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-lg-4 text-center" style="width: 300px;">
<div class="text-start">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-solid fa-sitemap"></i>
&nbsp;
Plan du
site</h6>
<ul class="list-unstyled">
<li class="shadow_menu"><a href="./Accueil.htm" class="underline"><i
class="fa-solid fa-house-user"></i> Accueil</a>
</li>
<li class="shadow_menu"><a href="./Plan_Site.htm" class="underline"><i
class="fa-solid fa-sitemap"></i> Plan du
site</a></li>
<li class="shadow_menu"><a href="./Sites_Interets.htm" class="underline"><i
class="fa-solid fa-book-atlas"></i> Sites
d’intérêts</a></li>
<li class="shadow_menu"><a href="./FAQ.htm" class="underline"><i
class="fa-solid fa-circle-question"></i>
FAQ</a></li>
<li class="shadow_menu"><a href="./Connaitre_Raspberry_Pi.htm" class="underline"><i
class="fa-brands fa-raspberry-pi"></i>
Connaître Raspberry Pi</a></li>
<li class="shadow_menu"><a href="./A_Propos.htm" class="underline"><i
class="fa-solid fa-circle-info"></i> À
propos</a></li>
<li class="shadow_menu"><a href="./Contact.htm" class="underline"><i
class="fa-solid fa-paper-plane"></i>
Contactez-nous</a></li>
</ul>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 text-center">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-brands fa-raspberry-pi"></i>
EducaJeux inc.</h6>
<p>MOYEN DE TÉLÉCOMMUNICATIONS</p>
<p><b>Tâche 2</b>
<br>Gr. i2013, juin 2022
<br>Sigfrido Gonzalez Puga
</p>
<hr>
<div class="row">
<div class="">
<div class="demo-content text-center">Site web réactif et compatible avec <br> les
navigateurs les plus courants : <br> <i class="fa-brands fa-chrome" title="Chrome"></i> <i
class="fa-brands fa-opera" title="Opera"></i> <i class="fa-brands fa-safari" title="Safari"></i>
<i class="fa-brands fa-edge" title="Edge"></i> <i class="fa-brands fa-firefox" title="Firefox"></i>
</div>
</div>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 text-center">
<h6 class="text-uppercase fw-bold mb-4 souligne"><i class="fa-solid fa-paper-plane"></i>
Contactez-nous</h6>
<p>
<i class="fas fa-home me-3"></i> 6255 13e Ave., Montréal, QC H1X 2Y6 <br>
<i class="fas fa-envelope me-3"></i>it-system@sigop.net <br>
<i class="fas fa-phone me-3"></i> (514) 742 6198 <br>
<i class="fa-brands fa-internet-explorer"></i> <a href="https://school.sigop.net/EMICA/462166/"
target="_blank">https://school.sigop.net/EMICA/462166/</a>
</p> <br>
<hr>
Retrouvez-nous sur nos réseaux sociaux: <br>
<a href="https://sigop.net/" target="_blank" class="me-4 text-reset"><i
class="fa-regular fa-address-card"></i></a>
<a href="https://www.linkedin.com/in/sigop" target="_blank" class="me-4 text-reset"><i
class="fab fa-linkedin"></i></a>
<a href="https://github.com/sgonzalp" target="_blank" class="me-4 text-reset"><i
class="fab fa-github"></i></a>
<a href="https://sigop.wordpress.com/" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-wordpress"></i></a>
<a href="https://blog.sigop.net/" target="_blank" class="me-4 text-reset"><i
class="fa-thin fa-note"></i></a>
<a href="https://www.facebook.com/www.SiGoP.net" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-facebook-f"></i></a>
<a href="https://twitter.com/sigopnet" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-twitter"></i></a>
<a href="https://www.youtube.com/c/SigfridoGonzalezPuga" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-youtube"></i></a>
<a href="http://instagram.com/sgonzalp/" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-instagram"></i></a>
<a href="https://pinterest.com/sgonzalezpuga" target="_blank" class="me-4 text-reset"><i
class="fa-brands fa-pinterest-square"></i></a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<div>&nbsp;</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: #44B28A; color: #FFF;">
<p>Copyright &copy; 2022 EducaJeux inc.</p>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</div>
<script src="./resources/js/main_end_page.js"></script>
<script>
document.querySelector(".sweetalert2_video_player").addEventListener('click', function () {
Swal.fire({
title: 'Super Video',
html:
'<div class="video-responsive"><iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Q0DGkqki5U4" allowfullscreen></iframe></div>',
showCloseButton: true,
focusConfirm: false,
confirmButtonText:
'<i class="fa fa-thumbs-up"></i> Genial!',
confirmButtonAriaLabel: 'Genial!'
})
});
</script>
</body>
</html>

@ -0,0 +1,84 @@
/*
============ Audio Styles ============
Creé par : Sigfrido Gonzalez Puga
Projet: EMICA | ANNEXE | 462166 | Connâitre Raspberry Pi
Date : Juin 2022
*/
.audio-player {
--player-button-width: 3em;
--sound-button-width: 2em;
--space: .5em;
width: 15rem;
height: 15rem;
}
.icon-container {
width: 100%;
height: 100%;
background-color: #DE5E97;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.audio-icon {
width: 90%;
height: 90%;
}
.controls {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
margin-top: 10px;
}
.player-button {
background-color: transparent;
border: 0;
width: var(--player-button-width);
height: var(--player-button-width);
cursor: pointer;
padding: 0;
}
.timeline {
-webkit-appearance: none;
width: calc(100% - (var(--player-button-width) + var(--sound-button-width) + var(--space)));
height: .5em;
background-color: #e5e5e5;
border-radius: 5px;
background-size: 0% 100%;
background-image: linear-gradient(#DE5E97, #DE5E97);
background-repeat: no-repeat;
margin-right: var(--space);
}
.timeline::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1em;
height: 1em;
border-radius: 50%;
cursor: pointer;
opacity: 0;
transition: all .1s;
background-color: #a94672;
}
.timeline::-moz-range-thumb {
-webkit-appearance: none;
width: 1em;
height: 1em;
border-radius: 50%;
cursor: pointer;
opacity: 0;
}
.musica {
display: flex;
justify-content: center;
align-items: center;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -0,0 +1,79 @@
/*
============ Images Styles ============
Creé par : Sigfrido Gonzalez Puga
Projet: EMICA | ANNEXE | 462166 | Connâitre Raspberry Pi
Date : Juin 2022
*/
.contenedor {
overflow: hidden;
}
.imagen {
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
}
.imagen-saturate:hover {
filter: saturate(280%);
}
.imagen-opacy:hover {
filter: opacity(.5);
}
.imagen-blur:hover {
filter: blur(5px);
}
.imagen-gray:hover {
filter: grayscale(80%);
}
.imagen-sepia:hover {
filter: sepia(60%);
}
.contenedor:hover .imagen-zoom {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.imagen-rota:hover {
border-radius: 50%;
-webkit-border-radius: 50%;
box-shadow: 0px 0px 15px 15px #92eaa13b;
-webkit-box-shadow: 0px 0px 15px 15px #92eaa13b;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
.imagen-slide:hover {
-webkit-transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform: rotateY(180deg);
transform-style: preserve-3d;
}
.objetfitcover>img {
width: 100%;
height: 250px;
object-fit: cover;
filter: blur(5px);
}
.cont_tit_img {
position: relative;
}
.cent_title_img {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
color: aliceblue;
font-size: 2vw;
text-shadow: 2px 2px 2px rgb(11, 11, 43);
font-family: 'EB Garamond', serif;
}

@ -0,0 +1,273 @@
/*
============ General Styles ============
Creé par : Sigfrido Gonzalez Puga
Projet: EMICA | ANNEXE | 462166 | Connâitre Raspberry Pi
Date : Juin 2022
*/
body {
font-family: 'Roboto', sans-serif !important;
}
.underline {
text-decoration: none;
}
.underline:hover {
text-decoration: underline;
font-weight: bolder;
color: #B3446C;
}
.shadow_menu:hover {
width: 100%;
background-color: #e0c7dc;
}
.souligne {
text-decoration: underline;
}
/* Custom style for changing separator */
.breadcrumb-item+.breadcrumb-item::before {
content: ">";
}
table * {
white-space: nowrap;
}
.carousel-item {
min-height: 500px;
background-color: #825e71;
}
.box {
width: 400px;
}
/* ============ Loader-page ============ */
.loader-page {
position: fixed;
z-index: 25000;
background: rgb(255, 255, 255);
left: 0px;
top: 0px;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease;
}
.loader-page::before {
content: "";
position: absolute;
border: 2px solid rgb(50, 150, 176);
width: 60px;
height: 60px;
border-radius: 50%;
box-sizing: border-box;
border-left: 2px solid rgba(50, 150, 176, 0);
border-top: 2px solid rgba(50, 150, 176, 0);
animation: rotarload 1s linear infinite;
transform: rotate(0deg);
}
@keyframes rotarload {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
.loader-page::after {
content: "";
position: absolute;
border: 2px solid rgba(50, 150, 176, .5);
width: 60px;
height: 60px;
border-radius: 50%;
box-sizing: border-box;
border-left: 2px solid rgba(50, 150, 176, 0);
border-top: 2px solid rgba(50, 150, 176, 0);
animation: rotarload 1s ease-out infinite;
transform: rotate(0deg);
}
/* ============ Loader-page ============ */
/* ============ Video Responsive ============ */
.video-responsive {
position: relative;
padding-bottom: 56.25%;
/* 16/9 ratio */
padding-top: 30px;
/* IE6 workaround*/
height: 0;
overflow: hidden;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* ============ Video Responsive ============ */
/* ============ Raspberry Colors ============ */
.image_raspberry_gray_to_color {
position: relative;
height: 290px;
width: 290px;
margin: 50px 20px;
float: left;
}
.image_raspberry_gray_to_color img {
position: absolute;
left: 0;
transition: opacity 1.5s ease-in-out;
}
.image_raspberry_gray_to_color img.raspberry_top:hover {
opacity: 0;
}
.bg-color-berry-dark {
background-color: #bf5f82;
}
.bg-color-berry-normal {
background-color: #92eaa13b;
}
.bg-color-berry-light {
background-color: #FCF5FB;
}
.txt_color_berry,
.txt_color_berry a {
color: #B3446C;
}
.berry_contenedor {
position: relative;
height: 290px;
width: 290px;
margin: 50px 20px;
float: left;
}
.berry_contenedor img {
position: absolute;
left: 0;
transition: opacity 1.5s ease-in-out;
}
.berry_contenedor img.top:hover {
opacity: 0;
}
/* ============ Raspberry Colors ============ */
/* ============ Menu multi level ============ */
@media all and (min-width: 992px) {
.dropdown-menu li {
position: relative;
}
.nav-item .submenu {
display: none;
position: absolute;
left: 100%;
top: -7px;
color: #B3446C;
}
.nav-item .submenu-left {
right: 100%;
left: auto;
}
.dropdown-menu>li:hover {
background-color: #f1f1f1 !important
}
.dropdown-menu>li:hover>.submenu {
display: block;
background-color: #e9aae0 !important;
}
.dropdown .dropdown-menu {
background-color: #c180be !important;
}
.navbar-nav .active a {
color: #fff !important;
font-weight: bold !important;
}
.nav-item a:hover {
text-decoration: overline underline !important;
}
}
@media (max-width: 991px) {
.dropdown-menu .dropdown-menu {
margin-left: 0.7rem;
margin-right: 0.7rem;
margin-bottom: .5rem;
}
}
/* ============ Menu multi leve ============ */
/* ============ SweetAlert2 ============ */
.show-example-btn {
padding: 0.9em 2.1875em;
border: 0;
border-radius: 0.1875em;
background-color: #7066e0;
box-shadow: none;
color: #fff;
font-size: 1.125em;
font-weight: 500;
white-space: nowrap;
}
.show-example-btn:hover {
background-color: #6459dd;
}
.show-example-btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(115, 103, 240, 0.5);
}
.show-example-btn::-moz-focus-inner {
border: 0;
}
.show-example-btn:active {
background-color: #483cd7;
}
/* ============ SweetAlert2 ============ */
body.swal2-shown>[aria-hidden="true"] {
transition: 0.1s filter;
filter: blur(10px);
}

@ -0,0 +1,14 @@
.map-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
.map-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}

File diff suppressed because one or more lines are too long

@ -0,0 +1,140 @@
/*
============ Style Time Line ============
Source : https://www.bootdey.com/
Adapté par : Sigfrido Gonzalez Puga
Projet: EMICA | ANNEXE | 462166 | Connâitre Raspberry Pi
Date : Juin 2022
*/
.timeline_area {
position: relative;
z-index: 1;
}
.single-timeline-area {
position: relative;
z-index: 1;
padding-left: 180px;
}
@media only screen and (max-width: 575px) {
.single-timeline-area {
padding-left: 100px;
}
}
.single-timeline-area .timeline-date {
position: absolute;
width: 180px;
height: 100%;
top: 0;
left: 0;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
padding-right: 60px;
}
@media only screen and (max-width: 575px) {
.single-timeline-area .timeline-date {
width: 100px;
}
}
.single-timeline-area .timeline-date::after {
position: absolute;
width: 3px;
height: 100%;
content: "";
background-color: #ebebeb;
top: 0;
right: 30px;
z-index: 1;
}
.single-timeline-area .timeline-date::before {
position: absolute;
width: 11px;
height: 11px;
border-radius: 50%;
background-color: #f1c40f;
content: "";
top: 50%;
right: 26px;
z-index: 5;
margin-top: -5.5px;
}
.single-timeline-area .timeline-date p {
margin-bottom: 0;
color: #020710;
font-size: 13px;
text-transform: uppercase;
font-weight: 500;
}
.single-timeline-area .single-timeline-content {
position: relative;
z-index: 1;
padding: 30px 30px 25px;
border-radius: 6px;
margin-bottom: 15px;
margin-top: 15px;
-webkit-box-shadow: 0 0.25rem 1rem 0 rgba(47, 91, 234, 0.125);
box-shadow: 0 0.25rem 1rem 0 rgba(47, 91, 234, 0.125);
border: 1px solid #ebebeb;
}
@media only screen and (max-width: 575px) {
.single-timeline-area .single-timeline-content {
padding: 20px;
}
}
.single-timeline-area .single-timeline-content .timeline-icon {
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
width: 30px;
height: 30px;
background-color: #f1c40f;
-webkit-box-flex: 0;
-ms-flex: 0 0 30px;
flex: 0 0 30px;
text-align: center;
max-width: 30px;
border-radius: 50%;
margin-right: 15px;
}
.single-timeline-area .single-timeline-content .timeline-icon i {
color: #ffffff;
line-height: 30px;
}
.single-timeline-area .single-timeline-content .timeline-text h6 {
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
}
.single-timeline-area .single-timeline-content .timeline-text p {
font-size: 13px;
margin-bottom: 0;
}
.single-timeline-area .single-timeline-content:hover .timeline-icon,
.single-timeline-area .single-timeline-content:focus .timeline-icon {
background-color: #020710;
}
.single-timeline-area .single-timeline-content:hover .timeline-text h6,
.single-timeline-area .single-timeline-content:focus .timeline-text h6 {
color: #3f43fd;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 151 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 503 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 393 KiB

@ -0,0 +1,6 @@
/*
============ JS Audio ============
Creé par : Sigfrido Gonzalez Puga
Projet: EMICA | ANNEXE | 462166 | Connâitre Raspberry Pi
Date : Juin 2022
*/

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -0,0 +1,43 @@
/*
============ JS Load Begin ============
Creé par : Sigfrido Gonzalez Puga
Projet: EMICA | ANNEXE | 462166 | Connâitre Raspberry Pi
Date : Juin 2022
*/
/* ============ Menu multi leve ============ */
document.addEventListener("DOMContentLoaded", function () {
// make it as accordion for smaller screens
if (window.innerWidth < 992) {
// close all inner dropdowns when parent is closed
document.querySelectorAll('.navbar .dropdown').forEach(function (everydropdown) {
everydropdown.addEventListener('hidden.bs.dropdown', function () {
// after dropdown is hidden, then find all submenus
this.querySelectorAll('.submenu').forEach(function (everysubmenu) {
// hide every submenu as well
everysubmenu.style.display = 'none';
});
})
});
document.querySelectorAll('.dropdown-menu a').forEach(function (element) {
element.addEventListener('click', function (e) {
let nextEl = this.nextElementSibling;
if (nextEl && nextEl.classList.contains('submenu')) {
// prevent opening link if link needs to open dropdown
e.preventDefault();
if (nextEl.style.display == 'block') {
nextEl.style.display = 'none';
} else {
nextEl.style.display = 'block';
}
}
});
})
}
// end if innerWidth
});
/* ============ Menu multi level ============ */

@ -0,0 +1,63 @@
/*
============ JS Load - end ============
Creé par : Sigfrido Gonzalez Puga
Projet: EMICA | ANNEXE | 462166 | Connâitre Raspberry Pi
Date : Juin 2022
*/
/* ============ Loader-page ============ */
$(window).on('load', function () {
setTimeout(function () {
$(".loader-page").css({ visibility: "hidden", opacity: "0" })
}, 50);
});
/* ============ Loader-page ============ */
/* ============ SweetAlert2 ============ */
document.querySelector(".sweetalert2_login").addEventListener('click', function () {
Swal.fire({
title: 'Formulaire de connexion',
html: `<small class="text-warning">Démonstration, aucune fonctionnalité</small><input type="text" id="login" class="swal2-input" placeholder="Utilisateur">
<input type="password" id="password" class="swal2-input" placeholder="Mot de o
passe">`,
confirmButtonText: 'Valider',
focusConfirm: false,
preConfirm: () => {
const login = Swal.getPopup().querySelector('#login').value
const password = Swal.getPopup().querySelector('#password').value
if (!login || !password) {
Swal.showValidationMessage(`Veuillez entrer le login et le mot de passe`)
}
return { login: login, password: password }
}
}).then((result) => {
Swal.fire(`
Login: ${result.value.login}
Password: ${result.value.password}
`.trim())
})
});
/*
document.querySelector(".sweetalert2_video_player").addEventListener('click', function () {
swal.fire(
'<div class="video-responsive"><iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Q0DGkqki5U4" allowfullscreen></iframe></div>',
'success'
);
});
document.querySelector(".second").addEventListener('click', function () {
Swal.fire("Our second Alert", "With some body text!");
});
document.querySelector(".third").addEventListener('click', function () {
Swal.fire("Our third Alert", "With some body text and success icon!", "success");
});
*/
/* ============ SweetAlert2 ============ */

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save