12 changed files with 1457 additions and 0 deletions
@ -0,0 +1,88 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>La programmation avec Jean-Lou</title> |
|||
<link rel="stylesheet" type="text/css" href="css/style.css"> |
|||
<link rel="stylesheet" type="text/css" href="css/prism.css"> |
|||
</head> |
|||
<body> |
|||
<nav> |
|||
<ul style="width: 1000px;"> |
|||
<li> |
|||
<a href="Index.html">Accueil</a> |
|||
</li> |
|||
|
|||
<li class="menu-deroulant"> |
|||
<a href="#"class="ho_menu">Languages</a> |
|||
<ul class="sous-menu"> |
|||
<li><a href="language/python.html">Python</a></li> |
|||
<li><a href="language/c.html">C</a></li> |
|||
<li><a href="language/c++.html">C++</a></li> |
|||
</ul> |
|||
</li> |
|||
|
|||
<li class="menu-deroulant"> |
|||
<a href="#" class="ho_menu">Rasberry Pi</a> |
|||
<ul class="sous-menu"> |
|||
<li><a href="histoire.html">Histoire</a></li> |
|||
<li><a href="os.html">Mettre un os</a></li> |
|||
<li><a href="lecteur.html">lecteur NFC</a></li> |
|||
</ul> |
|||
</li> |
|||
|
|||
<li><a href="interpreteur/interpreteur.html">Interpréteur</a></li> |
|||
</ul> |
|||
</nav> |
|||
|
|||
<div class="aligne"> |
|||
<div class="article"> |
|||
<h1 id="ancre1">Bienvenue sur la page d'accueil !</h1> |
|||
|
|||
<h2>Qui suis-je ?</h2> |
|||
|
|||
<p id="ancre2">Bonjour, je suis un lycéen en classe de première, cela fait déjà 2 an et demie que je suis passionné de l'informatique et de l'ectronique grace à mon père.</p> |
|||
|
|||
<h2>Comment j'ai commencé à programmer</h2> |
|||
|
|||
<p>Il a commencé a m'aprendre le C en vacance j'ai adoré mais avec les cours je n'avais pas trop le temps de continuer, mais "grace" au confinement j'ai pris du temps et j'ai repris a programmer sur unity en C# avec de la programmation orienté objet. |
|||
</p><p id="ancre3">J'y est passé pas mal de temps mais j'ai finit par aretter car je commençais a me lasser.</p> |
|||
|
|||
<h2>Comment j'ai commencé l'électronique</h2> |
|||
|
|||
<p>J'ai donc commencé l'électronique en réparant un poste radio des années 50 puis en lui r'ajoutant un kit Bluetooth.</p> |
|||
|
|||
<img src="images/poste_radio.jpeg"> |
|||
|
|||
<p>J'ai adoré faire ce projet et je me suis donc lancer un nouveau projet qui étais de créé une borne d'arcade, je me suis donc tourner vers les Rasbery Pi pour créé faire se projet. Mon père ma beaucoup aider pour aprendre les bases du Rasberry Pi et m'aide toujours beaucoup, j'ai continuer le projet et l'ai finit sans trop de problème majeur.</p> |
|||
|
|||
<img id="ancre4" src="images/arcade.jpeg"> |
|||
|
|||
<h2>L'aprentissage d'un nouveau language</h2> |
|||
|
|||
<p>En début de l'année dernière je suis entrée au lycée et j'étais pas mal intrigués par le système de carte de cantine qui nous sert également a rentrée et sortir du lycée par des portiques. J'ai le soir même demander a mon père et il ma expliqué que c'étais un sytème apellé NFC qui permetter a un lecteur de lire des tags de cartes qui se présenter devant celle-ci.<br><br> |
|||
Je me suis alors pencher sur cette technologie et j'ai eu une idée, créé une aplication mobile qui pourrait remplacer ces cartes de selfs que des élèves pourraient oubliées certains jour, alors que un téléphone ne soublie jamais. J'ai donc repris la programmation sur rasberry pi en aprennant un nouveau language, python. J'ai donc acheter un lecteur NFC pour rasberry pi , j'ai repris un écran LCD que mon père avait avec une carte Pyrack pour brancher le tout au rasberry pi. Et je me suis mits a programmer mais j'avait pas mal de mal au début, mon père m'aidait beaucoup.<br><br> |
|||
Il m'a appris à gérer des bases de données en python puis a lire des tags NFC puis a combiné les deux pour pouvoir avoir Un lecteur NFC avec bases de données. j'ai voulue par la suite r'ajouter l'écran mais les différents ports GPIO ne correspondait pas donc il ma apris a utiliser les sockets pour créé un serveur et un client et faire un protocole TCP/IP. |
|||
</p><p id="ancre5"> suis toujours en train de faire l'aplication mobile avec laquel j'ai pas mal de problème.</p> |
|||
|
|||
<h2>Remise à la programmation </h2> |
|||
|
|||
<p>Ce projet ma remits sérieusement dans la programmation . Puis est venue le semi-confinement, j'avait donc cours 1 semaines sur 2. J'ai donc passer une majeur partit de mon temps a programmer en python. Je me suis intéresser a plein de sujet différents comme récupéré les données derrières les images, l'intelligence artificielle ( le deep learning et le machine learning ), l'art ASCII, les assistants vocaux et plus récamment la cyber sécurité.<br><br> |
|||
Puis au lycée nous avons des cours de SNT ( Science Numérique et Technologique ) dans lequel nous devions faire un site sur un sujet au choix, j'ai donc pas mal réfléchis et je me suis dit que faire un site sur les bases de 3 languages que j'aime et sur le Rasberry Pi pouvait être intéressent.<br><br> |
|||
Je n'avait jamais touché a du html ni du css, mais j'ai regarder des documentations pendant 2 heures le premiers jours, et j'ai apris les balises de base qui me serait utile. Grace a ces balises j'ai peut réaliser se site en entier. J'ai donc fait sa, mais attention en aucun cas je me dit professionelle ou quoi que se soit, je suis juste passioné et encore débutant. </p> |
|||
</div> |
|||
<div class="partie"> |
|||
<nav id="navigation"> |
|||
<li><a class="lien" href="#ancre1">Qui suis-je?</a></li> |
|||
<li><a class="lien" href="#ancre2">Comment j'ai commencé la programmation</a></li> |
|||
<li><a class="lien" href="#ancre3">Comment j'ai commencé l'électronique</a></li> |
|||
<li><a class="lien" href="#ancre4">Un nouveau language</a></li> |
|||
<li><a class="lien" href="#ancre5">Remise à la programmation</a></li> |
|||
</nav> |
|||
</div> |
|||
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
|||
<script src="js/scroll.js"></script> |
|||
</div> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,191 @@ |
|||
/* PrismJS 1.22.0 |
|||
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+c+csharp+cpp+markup-templating+pascal+php+plsql+python+sql&plugins=show-language+toolbar+copy-to-clipboard */ |
|||
/** |
|||
* okaidia theme for JavaScript, CSS and HTML |
|||
* Loosely based on Monokai textmate theme by http://www.monokai.nl/ |
|||
* @author ocodia |
|||
*/ |
|||
|
|||
code[class*="language-"], |
|||
pre[class*="language-"] { |
|||
color: #f8f8f2; |
|||
background: none; |
|||
text-shadow: 0 1px rgba(0, 0, 0, 0.3); |
|||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
|||
font-size: 1em; |
|||
text-align: left; |
|||
white-space: pre; |
|||
word-spacing: normal; |
|||
word-break: normal; |
|||
word-wrap: normal; |
|||
line-height: 1.5; |
|||
|
|||
-moz-tab-size: 4; |
|||
-o-tab-size: 4; |
|||
tab-size: 4; |
|||
|
|||
-webkit-hyphens: none; |
|||
-moz-hyphens: none; |
|||
-ms-hyphens: none; |
|||
hyphens: none; |
|||
} |
|||
|
|||
/* Code blocks */ |
|||
pre[class*="language-"] { |
|||
padding: 1em; |
|||
margin: .5em 0; |
|||
overflow: auto; |
|||
border-radius: 0.3em; |
|||
} |
|||
|
|||
:not(pre) > code[class*="language-"], |
|||
pre[class*="language-"] { |
|||
background: #272822; |
|||
} |
|||
|
|||
/* Inline code */ |
|||
:not(pre) > code[class*="language-"] { |
|||
padding: .1em; |
|||
border-radius: .3em; |
|||
white-space: normal; |
|||
} |
|||
|
|||
.token.comment, |
|||
.token.prolog, |
|||
.token.doctype, |
|||
.token.cdata { |
|||
color: #8292a2; |
|||
} |
|||
|
|||
.token.punctuation { |
|||
color: #f8f8f2; |
|||
} |
|||
|
|||
.token.namespace { |
|||
opacity: .7; |
|||
} |
|||
|
|||
.token.property, |
|||
.token.tag, |
|||
.token.constant, |
|||
.token.symbol, |
|||
.token.deleted { |
|||
color: #f92672; |
|||
} |
|||
|
|||
.token.boolean, |
|||
.token.number { |
|||
color: #ae81ff; |
|||
} |
|||
|
|||
.token.selector, |
|||
.token.attr-name, |
|||
.token.string, |
|||
.token.char, |
|||
.token.builtin, |
|||
.token.inserted { |
|||
color: #a6e22e; |
|||
} |
|||
|
|||
.token.operator, |
|||
.token.entity, |
|||
.token.url, |
|||
.language-css .token.string, |
|||
.style .token.string, |
|||
.token.variable { |
|||
color: #f8f8f2; |
|||
} |
|||
|
|||
.token.atrule, |
|||
.token.attr-value, |
|||
.token.function, |
|||
.token.class-name { |
|||
color: #e6db74; |
|||
} |
|||
|
|||
.token.keyword { |
|||
color: #66d9ef; |
|||
} |
|||
|
|||
.token.regex, |
|||
.token.important { |
|||
color: #fd971f; |
|||
} |
|||
|
|||
.token.important, |
|||
.token.bold { |
|||
font-weight: bold; |
|||
} |
|||
.token.italic { |
|||
font-style: italic; |
|||
} |
|||
|
|||
.token.entity { |
|||
cursor: help; |
|||
} |
|||
|
|||
div.code-toolbar { |
|||
position: relative; |
|||
} |
|||
|
|||
div.code-toolbar > .toolbar { |
|||
position: absolute; |
|||
top: .3em; |
|||
right: .2em; |
|||
transition: opacity 0.3s ease-in-out; |
|||
opacity: 0; |
|||
} |
|||
|
|||
div.code-toolbar:hover > .toolbar { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/* Separate line b/c rules are thrown out if selector is invalid. |
|||
IE11 and old Edge versions don't support :focus-within. */ |
|||
div.code-toolbar:focus-within > .toolbar { |
|||
opacity: 1; |
|||
} |
|||
|
|||
div.code-toolbar > .toolbar .toolbar-item { |
|||
display: inline-block; |
|||
} |
|||
|
|||
div.code-toolbar > .toolbar a { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
div.code-toolbar > .toolbar button { |
|||
background: none; |
|||
border: 0; |
|||
color: inherit; |
|||
font: inherit; |
|||
line-height: normal; |
|||
overflow: visible; |
|||
padding: 0; |
|||
-webkit-user-select: none; /* for button */ |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
} |
|||
|
|||
div.code-toolbar > .toolbar a, |
|||
div.code-toolbar > .toolbar button, |
|||
div.code-toolbar > .toolbar span { |
|||
color: #bbb; |
|||
font-size: .8em; |
|||
padding: 0 .5em; |
|||
background: #f5f2f0; |
|||
background: rgba(224, 224, 224, 0.2); |
|||
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); |
|||
border-radius: .5em; |
|||
} |
|||
|
|||
div.code-toolbar > .toolbar a:hover, |
|||
div.code-toolbar > .toolbar a:focus, |
|||
div.code-toolbar > .toolbar button:hover, |
|||
div.code-toolbar > .toolbar button:focus, |
|||
div.code-toolbar > .toolbar span:hover, |
|||
div.code-toolbar > .toolbar span:focus { |
|||
color: inherit; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
@ -0,0 +1,360 @@ |
|||
:root{ |
|||
--hauteur-menu: 60px; |
|||
} |
|||
|
|||
body |
|||
{ |
|||
background-color: #DFD1D1; |
|||
} |
|||
|
|||
*{ |
|||
font-family: Montserrat, sans-serif; |
|||
} |
|||
|
|||
a |
|||
{ |
|||
text-decoration: none; |
|||
color: black; |
|||
} |
|||
|
|||
nav { |
|||
width: 1040px; |
|||
font-size: 18px; |
|||
position: sticky; |
|||
top:0; |
|||
margin:0% 0% 0% 13%;/*50 200 0 400 */ |
|||
z-index: 1; |
|||
background-color: rgba(0,0,0,0); |
|||
} |
|||
|
|||
nav > ul { |
|||
display: flex; |
|||
text-align: center; |
|||
box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.3); |
|||
height: var(--hauteur-menu); |
|||
background-color: white; |
|||
} |
|||
|
|||
nav ul { |
|||
list-style-type: none; |
|||
} |
|||
|
|||
nav > ul > li { |
|||
background-color: white; |
|||
position: relative; |
|||
height: 10%; |
|||
flex: 1; |
|||
} |
|||
|
|||
nav > ul > li > a { |
|||
position: absolute; |
|||
top: 500%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
|
|||
.ho_menu { |
|||
padding:20px; |
|||
} |
|||
|
|||
li a { |
|||
text-decoration: none; |
|||
color: black; |
|||
} |
|||
|
|||
.menu-deroulant > a:after{ |
|||
content: '❯'; |
|||
font-size: 15px; |
|||
margin-left: 7px; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.sous-menu { |
|||
margin-top: var(--hauteur-menu); |
|||
width: 100%; |
|||
text-align: left; |
|||
background-color: white; |
|||
border-radius: 2px; |
|||
overflow: hidden; |
|||
max-height: 0; |
|||
} |
|||
|
|||
.sous-menu > li > a { |
|||
height: 50px; |
|||
padding-left: 20px; |
|||
width: 100%; |
|||
align-items: center; |
|||
display: flex; |
|||
} |
|||
|
|||
nav > ul > li:hover > a{ |
|||
color: #2169EC; |
|||
} |
|||
|
|||
.sous-menu > li:hover { |
|||
background-color: rgba(33, 105, 236, 0.3); |
|||
} |
|||
|
|||
.sous-menu > li:hover > a { |
|||
color: white; |
|||
} |
|||
|
|||
@keyframes rotationFleche { |
|||
0% { |
|||
transform: rotate(0deg); |
|||
} |
|||
100%{ |
|||
transform: rotate(90deg); |
|||
} |
|||
} |
|||
|
|||
.menu-deroulant:hover > a:after{ |
|||
animation: rotationFleche 0.2s linear forwards; |
|||
} |
|||
|
|||
@keyframes apparitionSousMenu { |
|||
0% { |
|||
box-shadow: 0px 3px 3px 1px rgba(0,0,0,0); |
|||
border-top: 3px solid #2169EC; |
|||
} |
|||
30% { |
|||
box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3); |
|||
} |
|||
100% { |
|||
max-height: 50em; |
|||
border-top: 3px solid #2169EC; |
|||
box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3); |
|||
} |
|||
} |
|||
|
|||
.menu-deroulant:hover > .sous-menu { |
|||
animation: apparitionSousMenu 1s forwards; |
|||
} |
|||
|
|||
|
|||
.aligne |
|||
{ |
|||
display: flex; |
|||
justify-content: center; |
|||
position: relative; |
|||
margin: 0% 0% 0% 1%; |
|||
background-color: rgba(0,0,0,0); |
|||
} |
|||
|
|||
|
|||
|
|||
.article |
|||
{ |
|||
width:1040px; |
|||
box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.3); |
|||
background-color: white; |
|||
} |
|||
|
|||
.article h1 |
|||
{ |
|||
margin-top: 80px; |
|||
margin-bottom: 80px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.article img |
|||
{ |
|||
box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.3); |
|||
margin-left: 300px; |
|||
margin-top: 20px; |
|||
margin-bottom: 30px; |
|||
height: 300px; |
|||
width: 450px; |
|||
} |
|||
|
|||
.article h2 |
|||
{ |
|||
margin-top: 40px; |
|||
margin-left: 40px; |
|||
} |
|||
|
|||
.article p |
|||
{ |
|||
margin-left: 40px; |
|||
} |
|||
|
|||
|
|||
|
|||
.partie |
|||
{ |
|||
margin-left: 40px; |
|||
width:300px; |
|||
height: 400px; |
|||
position: -webkit-sticky; |
|||
position: sticky; |
|||
top: var(--hauteur-menu); |
|||
box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.3); |
|||
background-color: white; |
|||
} |
|||
|
|||
|
|||
|
|||
/*###############Python##################*/ |
|||
|
|||
#img_python |
|||
{ |
|||
width: 220px; |
|||
height: 200px; |
|||
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0); |
|||
margin-left: 400px; |
|||
} |
|||
|
|||
@keyframes grandissement_python |
|||
{ |
|||
from |
|||
{ |
|||
width: 220px; |
|||
height: 200px; |
|||
margin-left: 400px; |
|||
} |
|||
|
|||
to |
|||
{ |
|||
width: 300px; |
|||
height: 250px; |
|||
margin-left: 360px; |
|||
} |
|||
} |
|||
|
|||
#img_python:hover |
|||
{ |
|||
animation: grandissement_python 2s infinite alternate; |
|||
|
|||
} |
|||
|
|||
|
|||
#script |
|||
{ |
|||
width: 800px; |
|||
margin: 0 auto; |
|||
background-color: #1c2833; |
|||
border-radius: 10px; |
|||
margin-bottom: 50px; |
|||
} |
|||
|
|||
|
|||
#navigation { |
|||
width: 300px; |
|||
list-style: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
#navigation li { |
|||
margin-top: 20px; |
|||
background: white ; |
|||
color: #fff ; |
|||
margin-bottom: 1px ; |
|||
} |
|||
|
|||
#navigation li a { |
|||
margin-left: 15px; |
|||
margin-right: 5px; |
|||
font-size: 25px; |
|||
display: block ; |
|||
color: black ; |
|||
line-height: 1em ; |
|||
text-decoration: none ; |
|||
padding: 4px 0 ; |
|||
} |
|||
|
|||
#navigation li a:hover, #navigation li a:focus, #navigation li a:active { |
|||
color: #2169EC; |
|||
} |
|||
|
|||
|
|||
/*############### C ##################*/ |
|||
|
|||
|
|||
#c_img |
|||
{ |
|||
width: 180px; |
|||
height: 250px; |
|||
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0); |
|||
margin-left: 420px; |
|||
} |
|||
|
|||
@keyframes grandissement_c |
|||
{ |
|||
from |
|||
{ |
|||
width: 180px; |
|||
height: 250px; |
|||
margin-left: 420px; |
|||
} |
|||
|
|||
to |
|||
{ |
|||
width: 300px; |
|||
height: 370px; |
|||
margin-left: 360px; |
|||
} |
|||
} |
|||
|
|||
#c_img:hover |
|||
{ |
|||
animation: grandissement_c 2s infinite alternate; |
|||
} |
|||
|
|||
#compilC |
|||
{ |
|||
width: 500px; |
|||
height: 300px; |
|||
margin-left: 220px; |
|||
} |
|||
|
|||
/*############### C++ ##################*/ |
|||
|
|||
|
|||
#cc |
|||
{ |
|||
width: 180px; |
|||
height: 250px; |
|||
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0); |
|||
margin-left: 420px; |
|||
} |
|||
|
|||
@keyframes grandissement_cc |
|||
{ |
|||
from |
|||
{ |
|||
width: 180px; |
|||
height: 250px; |
|||
margin-left: 420px; |
|||
} |
|||
|
|||
to |
|||
{ |
|||
width: 300px; |
|||
height: 370px; |
|||
margin-left: 360px; |
|||
} |
|||
} |
|||
|
|||
#cc:hover |
|||
{ |
|||
animation: grandissement_cc 2s infinite alternate; |
|||
} |
|||
|
|||
#compilCC |
|||
{ |
|||
width: 500px; |
|||
height: 300px; |
|||
margin-left: 220px; |
|||
} |
|||
|
|||
/*############### interpreteur ##################*/ |
|||
|
|||
.Interpreteur |
|||
{ |
|||
width: 80%; |
|||
height: 356px; |
|||
margin-left: 100px; |
|||
margin-top: 30px; |
|||
margin-bottom: 30px; |
|||
} |
|||
|
After Width: | Height: | Size: 1.7 MiB |
|
After Width: | Height: | Size: 2.0 MiB |
|
After Width: | Height: | Size: 25 KiB |
@ -0,0 +1,61 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>La programmation avec Jean-Lou</title> |
|||
<link rel="stylesheet" type="text/css" href="../css/style.css"> |
|||
<link rel="stylesheet" type="text/css" href="../css/prism.css"> |
|||
</head> |
|||
<body> |
|||
<nav> |
|||
<ul style="width: 1000px;"> |
|||
<li> |
|||
<a href="../Index.html">Accueil</a> |
|||
</li> |
|||
|
|||
<li class="menu-deroulant"> |
|||
<a href="#"class="ho_menu">Languages</a> |
|||
<ul class="sous-menu"> |
|||
<li><a href="../language/python.html">Python</a></li> |
|||
<li><a href="../language/c.html">C</a></li> |
|||
<li><a href="../language/c++.html">C++</a></li> |
|||
</ul> |
|||
</li> |
|||
|
|||
<li class="menu-deroulant"> |
|||
<a href="#" class="ho_menu">Rasberry Pi</a> |
|||
<ul class="sous-menu"> |
|||
<li><a href="histoire.html">Histoire</a></li> |
|||
<li><a href="os.html">Mettre un os</a></li> |
|||
<li><a href="lecteur.html">lecteur NFC</a></li> |
|||
</ul> |
|||
</li> |
|||
|
|||
<li><a href="../interpreteur/interpreteur.html">Interpréteur</a></li> |
|||
</ul> |
|||
</nav> |
|||
|
|||
<div class="aligne"> |
|||
<div class="article"> |
|||
|
|||
<h1 id="ancre1">Bienvenue sur la page de l'interpréteur <a href="https://www.python.org/">Python</a> !</h1> |
|||
|
|||
<p>Sur cette page vous pouvez soit programmer dans la console python, soit programmer un programme puis l'éxécuter.<br> C'est l'interpréteur Trinket, vous pouvez donc liée votre compte avec. </p> |
|||
|
|||
<iframe class="Interpreteur" src="https://trinket.io/embed/python/edd948bf08" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe> |
|||
|
|||
</div> |
|||
|
|||
<div class="partie"> |
|||
<nav id="navigation"> |
|||
<li><a class="lien" href="#ancre1">Python qu'est ce que c'est ?</a></li> |
|||
<li><a class="lien" href="#ancre2">Création de Python</a></li> |
|||
<li><a class="lien" href="#ancre3">Pourquoi un tels succés ?</a></li> |
|||
<li><a class="lien" href="#ancre4">Examples de fonctions basiques</a></li> |
|||
<li><a class="lien" href="#ancre5">Votre premier programme</a></li> |
|||
</nav> |
|||
</div> |
|||
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
|||
<script src="../js/scroll.js"></script> |
|||
</body> |
|||
</html> |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,8 @@ |
|||
$(".lien").click(function(){ |
|||
var ancre = $(this).attr("href"); |
|||
$("html, body").animate({ |
|||
scrollTop : $(ancre).offset().top |
|||
}, "slow"); |
|||
|
|||
return false; |
|||
}); |
|||
@ -0,0 +1,241 @@ |
|||
<!DOCTYPE html> |
|||
|
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>La programmation avec Jean-Lou</title> |
|||
<link rel="stylesheet" type="text/css" href="../css/style.css"> |
|||
<link rel="stylesheet" type="text/css" href="../css/prism.css"> |
|||
</head> |
|||
<body> |
|||
<nav> |
|||
<ul style="width: 1000px;"> |
|||
<li> |
|||
<a href="../Index.html">Accueil</a> |
|||
</li> |
|||
|
|||
<li class="menu-deroulant"> |
|||
<a href="#"class="ho_menu">Languages</a> |
|||
<ul class="sous-menu"> |
|||
<li><a href="python.html">Python</a></li> |
|||
<li><a href="c.html">C</a></li> |
|||
<li><a href="c++.html">C++</a></li> |
|||
</ul> |
|||
</li> |
|||
|
|||
<li class="menu-deroulant"> |
|||
<a href="#" class="ho_menu">Rasberry Pi</a> |
|||
<ul class="sous-menu"> |
|||
<li><a href="histoire.html">Histoire</a></li> |
|||
<li><a href="os.html">Mettre un os</a></li> |
|||
<li><a href="lecteur.html">lecteur NFC</a></li> |
|||
</ul> |
|||
</li> |
|||
|
|||
<li><a href="../interpreteur/interpreteur.html">Interpréteur</a></li> |
|||
</ul> |
|||
</nav> |
|||
|
|||
<div class="aligne"> |
|||
<div class="article"> |
|||
<h1 id="ancre1">Bienvenue sur la page du <a href="https://fr.wikipedia.org/wiki/C%2B%2B">C++ !</a></h1> |
|||
|
|||
<h2>Le <a href="https://fr.wikipedia.org/wiki/C%2B%2B">C++</a> qu'est ce que c'est ? </h2> |
|||
|
|||
<img src="https://upload.wikimedia.org/wikipedia/commons/1/18/ISO_C%2B%2B_Logo.svg" id="cc"> |
|||
|
|||
<p id="ancre2">C++ est un langage de programmation compilé permettant la programmation sous de multiples paradigmes,dont la programmation procédurale, la programmation orientée objet et la programmation générique.<br> |
|||
<br> |
|||
Ses bonnes performances, et sa compatibilité avec le C en font un des langages de programmation les plus utilisés dans les applications où la performance est critique.<br> |
|||
<br> |
|||
En langage C, ++ est l'opérateur d'incrémentation, c'est-à-dire l'augmentation de la valeur d'une variable de 1. C'est pourquoi C++ porte ce nom : cela signifie que C++ est un niveau au-dessus de C.</p> |
|||
|
|||
<h2>Comment et par qui a été créé le C++ ?</h2> |
|||
|
|||
<p>Bjarne Stroustrup commence le développement de C with Classes (C avec des classes) en 1979. Il travaille alors dans les laboratoires Bell où il est notamment collègue de l'inventeur du C Dennis Ritchie. L'idée de créer un nouveau langage venait de l'expérience en programmation de Stroustrup pour sa thèse de doctorat.<br> |
|||
<br> |
|||
Il s'agissait en l'occurrence d'améliorer le langage C. Stroustrup trouvait que Simula avait des fonctionnalités très utiles pour le développement de gros programmes mais qu'il était trop lent pour être utilisé en pratique (cela était dû à un problème d'implémentation du compilateur Simula),<br> |
|||
tandis que BCPL était rapide mais de trop bas niveau et non adapté au développement de gros logiciels.<br> |
|||
<br> |
|||
Quand Stroustrup commença à travailler aux laboratoires Bell, on lui demanda d'analyser le noyau UNIX en vue de faire du calcul distribué. Se rappelant sa thèse, Stroustrup commença à améliorer le langage C avec des fonctionnalités similaires à celle de Simula.<br> |
|||
<br> |
|||
C fut choisi parce qu'il est rapide, portable et d'usage général. En outre, il était une bonne base pour le principe original et fondateur de C++ : « vous ne payez pas pour ce que vous n'utilisez pas ». Dès le départ, le langage ajoutait à C la notion de classe (avec encapsulation des données), de classe dérivée, |
|||
de vérification des types renforcés (typage fort), d'« inlining », et d'argument par défaut.</p> |
|||
|
|||
<p class="creapythonom">Bjarne Stroustrup</p> |
|||
<img id="ancre3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/BjarneStroustrup.jpg/220px-BjarneStroustrup.jpg" class="creapython"> |
|||
|
|||
<h2>Pourquoi est-il beaucoup utilisé ?</h2> |
|||
|
|||
<p id="ancre4">Le C++ est connu pour être un langage très puissant. Le C++ vous permet d’avoir un grand contrôle sur la façon dont vous utilisez les ressources informatiques, |
|||
donc entre de bonnes mains sa vitesse <br> |
|||
et sa capacité à utiliser les ressources à moindre coût devraient pouvoir surpasser les autres langages.<br> |
|||
Grâce à ses performances, le C++ est souvent utilisé pour développer des moteurs de jeu,<br> |
|||
des jeux et des applications de bureau. De nombreux jeux vidéo de niveau AAA sont construits en C++.<br> |
|||
<br> |
|||
Comme nous l’avons déjà mentionné, puisque vous avez un grand contrôle sur la façon dont votre application utilise les ressources, |
|||
votre application peut consommer très peu de ressources.<br> |
|||
Dans l’ensemble, comme le C++ peut être très performant entre de bonnes mains,<br> |
|||
les entreprises utilisent souvent le C++ pour coder des fonctions qui dépendent de la vitesse<br> |
|||
et de l’utilisation des ressources.<br></p> |
|||
|
|||
<h2>Quelques examples de programmes basiques</h2> |
|||
|
|||
<p class="textprint">Comme pour le C le C++ doit être compiler pour être éxécuter.<br> |
|||
Si vous voulez plus de précisions je vous laisse regarder la page du C dans laquel tout est expliqué.<br><br> |
|||
|
|||
<img src="https://yard.onl/sitelycee/cours/c/lib/NouvelElement105.jpg" id="compilCC" ><br><br> |
|||
|
|||
Pour un premier programme je vais vous montrez comment faire afficher un message, cela sera assez similaire avec le C mais il y aura quelques changements. Pour cela nous allons utilisé la fonction count avec le fameux "Hello world". il faut définir la sortie d'affichage standard std.<br><br> |
|||
Tout d'abord il faudra ce rendre dans <a href="http://www.codeblocks.org/downloads">code blocks</a> qu'il faudra au préhalable installer. Vous pouvez utiliser un autre compileur mais les examples seront fait sur celui la.<br><br> |
|||
Dans ces exemples je ne vous montrerez pas comment créé un projet sur Code Block car je juge cette étape assez simple d'accès avec des documentations ou des tutos sur internet.</p> |
|||
|
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
<pre><code class="language-c++">#include <iostream> |
|||
using namespace std; |
|||
|
|||
int main() |
|||
{ |
|||
std::cout<<"Hello World"; |
|||
return 0; |
|||
} |
|||
</code></pre> |
|||
|
|||
</div> |
|||
|
|||
<p>Voila, ceci est votre premier programme en C++. Il est très basique mais permet de bien comprendre les bases du C++.<br> |
|||
Nous simplifierons par la suite e déclarant le slux standard std en global.<br><br> |
|||
Tout d'abord on voit que pour mettre des bliblihotèques ce n'est pas la meme chose que en Python. Pour importer des bliblihotèques il faut mettre un " #include " puis le nom de la bliblihotèque dans une balise. Sur cette example les balise sont mals mise, il manque le crocher avant le nom de la bliblihotèques mais je ne peut pas le mettre sinon cela fait des problèmes avec le script en html.<br><br> |
|||
Il faut aussi mettre un "using namespace std" pour .....<br><br> |
|||
|
|||
Ensuite il faut mettre des accolades pour délimités une fonction. Ensuite dans une fonction et en générale l'indentation du script n'est pas obligé, cela ne générera pas une erreur si vous ne le faites pas. Mais il est conseiller de le faire pour avoir des scripts propres. Pour finir a chaque fin de ligne sauf le début d'un fonction il faut mettre des points virgules, ceci est obligatoire et faira une erreur si vous n'en mettez pas.<br><br> |
|||
|
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
<pre><code class="language-c++">#include <iostream> |
|||
using namespace std; |
|||
|
|||
int main() { |
|||
cout<<"Hello World"; |
|||
return 0; |
|||
} |
|||
</code></pre> |
|||
|
|||
</div> |
|||
|
|||
<p>Ce script est totalement correct mais est bien moins claire que celui d'avant. Souvent au début on a du mal a se rendre compte de la différence mais quand on commencera a faire de scripts bien plus volumineux cela deviendra très vite illisible.</p> |
|||
|
|||
<p>Vous aurez remarquer aussi que contrairement au C ou c'est " printf " en C++ c'est " cout<< " .<br> |
|||
A par cette petite différence le code est similaire au C.</p> |
|||
|
|||
<p><br>Maintenant que vous connaissez les bases, vous pouvez réaliser un programme très simple qui calcule l'aire d'un rectangle.<br><br> |
|||
|
|||
Créez en premier temps le squelette:<br><br> |
|||
-inclusion des librairies essentielles: stdio <br> |
|||
-creation d'un espace : std<br> |
|||
-corps du programme (main) |
|||
<br> |
|||
<br> |
|||
|
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
<pre><code class="language-c++">#include <iostream> |
|||
using namespace std; |
|||
|
|||
int main() { |
|||
|
|||
return EXIT_SUCCESS; |
|||
|
|||
} |
|||
</code></pre> |
|||
|
|||
</div> |
|||
|
|||
<p>La fonction main s'exécuter au lancement du programme.<br><br> |
|||
|
|||
Il vous reste à coder la demande à l'utilisateur de renseigner les longeur et largeur du rectangle, avant de calcuer son aire.<br> |
|||
Pour cela il convient de définir les variables qui contiendront ces deux données et leur type. C'est facile , elles seront numériques, typées décimales, donc en langage <strong>C++</strong> typées float<br><br> |
|||
Ajoutez à votre programme la définition des variables comme ci-dessous. Voici un exemple typique du laxisme facilement pris en <strong>C++</strong>: on peut déclarer ces variables en global, ou en local.<br><br> |
|||
En 2 lignes:<br><br> |
|||
-déclaration globales: au même niveau que les include, hors de toute fonction. L'avantage est que le contenu de ces variables est accesible depuis toutes les fonctions.<br> |
|||
<br>-déclaration locale: la variable n'est accessible que dasn la fonction et ne rete pas en mémoire après son utilisation: le recyclage avant l'heure!<br><br> |
|||
|
|||
Vous déclarez une variable l pour la largeur, une variable L pour la longueur. <strong>C++</strong> est sensible à la casse, voilà encore un exemple de ce que l'on peut faire en <strong>C++</strong> mais que l'on ne doit pas faire: illisibilité, confusion,..</p> |
|||
|
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
<pre><code class="language-c++">#include <iostream> |
|||
using namespace std; |
|||
|
|||
int main() { |
|||
|
|||
float l,L; |
|||
|
|||
return EXIT_SUCCESS; |
|||
} |
|||
</code></pre> |
|||
|
|||
</div> |
|||
|
|||
<p>En <strong>C++</strong> les programmes sont assez optimiser et ne sont pas très lourd comparer au <strong>C</strong>. Mais vous ne pourrait pas mettre de texte dans une demande de saisie a l'utilisateur, ce qui est assez contraignant mais ne demande pas beaucoup de ressources.<br> |
|||
<br> |
|||
Nous allons donc d'abord aficher un message a l'utilisateur puis demander une saisie de texte par la suite comme ceci :</p> |
|||
|
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
<pre><code class="language-c++">#include <iostream> |
|||
using namespace std; |
|||
|
|||
int main() { |
|||
|
|||
float l,L; |
|||
cout<<"Veuillez entrez la longeur :"; |
|||
cin>>l; |
|||
cout<<"Veuillez entrez la largeur :"; |
|||
cin>>L; |
|||
|
|||
return EXIT_SUCCESS; |
|||
} |
|||
</code></pre> |
|||
|
|||
</div> |
|||
|
|||
<p>Une fois les demandes faites il ne vous reste plus qu'a faire le calcule et a afficher l'aire dans un message, pour cela nous allons utiliser que un " cout " dans lequel nous fairons le calcul des deux variables.<br><br></p> |
|||
|
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
<pre><code class="language-c++">#include <iostream> |
|||
using namespace std; |
|||
|
|||
int main() { |
|||
|
|||
float l,L; |
|||
cout<<"Veuillez entrez la longeur :"; |
|||
cin>>l; |
|||
cout<<"Veuillez entrez la largeur :"; |
|||
cin>>L; |
|||
cout<<"L'aire de votre rectangle est "<< l*L <<" m"; |
|||
|
|||
return EXIT_SUCCESS; |
|||
} |
|||
</code></pre> |
|||
|
|||
</div> |
|||
|
|||
<p>Et voila vous venez de finir votre premier programme en <strong>C++</strong>, vous pouvez l'éxécuter et à le tester.</p> |
|||
|
|||
</div> |
|||
|
|||
<div class="partie"> |
|||
<nav id="navigation"> |
|||
<li><a class="lien" href="#ancre1">Le C++ qu'est ce que c'est?</a></li> |
|||
<li><a class="lien" href="#ancre2">Comment à été créé le C++ ?</a></li> |
|||
<li><a class="lien" href="#ancre3">Pourquoi est il beaucoup utilisé ?</a></li> |
|||
<li><a class="lien" href="#ancre4">Examples de programmes basiques</a></li> |
|||
</nav> |
|||
</div> |
|||
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
|||
<script src="../js/scroll.js"></script> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,251 @@ |
|||
<!DOCTYPE html> |
|||
|
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>La programmation avec Jean-Lou</title> |
|||
<link rel="stylesheet" type="text/css" href="../css/style.css"> |
|||
<link rel="stylesheet" type="text/css" href="../css/prism.css"> |
|||
</head> |
|||
|
|||
<body> |
|||
<nav> |
|||
<ul style="width: 1000px;"> |
|||
<li> |
|||
<a href="../Index.html">Accueil</a> |
|||
</li> |
|||
|
|||
<li class="menu-deroulant"> |
|||
<a href="#"class="ho_menu">Languages</a> |
|||
<ul class="sous-menu"> |
|||
<li><a href="python.html">Python</a></li> |
|||
<li><a href="c.html">C</a></li> |
|||
<li><a href="c++.html">C++</a></li> |
|||
</ul> |
|||
</li> |
|||
|
|||
<li class="menu-deroulant"> |
|||
<a href="#" class="ho_menu">Rasberry Pi</a> |
|||
<ul class="sous-menu"> |
|||
<li><a href="histoire.html">Histoire</a></li> |
|||
<li><a href="os.html">Mettre un os</a></li> |
|||
<li><a href="lecteur.html">lecteur NFC</a></li> |
|||
</ul> |
|||
</li> |
|||
|
|||
<li><a href="../interpreteur/interpreteur.html">Interpréteur</a></li> |
|||
</ul> |
|||
</nav> |
|||
|
|||
<div class="aligne"> |
|||
<div class="article"><div> |
|||
<h1 id="ancre1">Bienvenue sur la page de <a href="https://fr.wikipedia.org/wiki/C_(langage)">C</a> !</h1> |
|||
|
|||
<img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Letter_c.svg/1200px-Letter_c.svg.png" id="c_img"></img> |
|||
|
|||
<h2>Le <a href="https://fr.wikipedia.org/wiki/C_(langage)">C</a> qu'est ce que c'est ?</h2> |
|||
|
|||
<p id="ancre2">Le <strong>C</strong> est un langage de programmation impératif généraliste, de bas niveau. Inventé au début des années 1970 pour réécrire UNIX, |
|||
C est devenu un des langages les plus utilisé, encore de nos jours.<br><br> |
|||
De nombreux langages plus modernes comme C++, C#, Java, |
|||
PHP, Javascript et bien d'autres encore sont hérités du langage C et reprennent en partie sa logique. <br><br> |
|||
C offre au développeur une marge de contrôle importante sur la machine (notamment sur la gestion de la mémoire) et est de ce fait utilisé pour réaliser les « fondations » |
|||
(compilateurs, interpréteurs…) de ces langages plus modernes.</p> |
|||
|
|||
<h2>Comment et par qui a été créé le C ?</h2> |
|||
|
|||
<p>Le langage C a été inventé au cours de l'année 1972 dans les Laboratoires Bell.<br> |
|||
Il était développé en même temps que UNIX par Dennis Ritchie et Ken Thompson.<br><br> |
|||
Ken Thompson avait développé un prédécesseur de C, le langage B, qui est lui-même inspiré de BCPL. |
|||
Dennis Ritchie a fait évoluer le langage B dans une nouvelle version suffisamment différente,<br> |
|||
en ajoutant notamment les types, pour qu'elle soit appelée C</p> |
|||
|
|||
<p class="nomcreaC">Dennis Ritchie et Ken Thompson</p> |
|||
<img id="ancre3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Ken_Thompson_and_Dennis_Ritchie--1973.jpg/220px-Ken_Thompson_and_Dennis_Ritchie--1973.jpg" class="creaC"> |
|||
|
|||
<h2>Pourquoi est-il beaucoup utilisé ?</h2> |
|||
|
|||
<p id="ancre4">C'est un des langages les plus utilisés car :<br> |
|||
<br> |
|||
-il existe depuis longtemps, le début des années 1970 ;<br> |
|||
-il est fondé sur un standard ouvert (selon la norme ANSI);<br> |
|||
-il est très facilement portable entre sytèmes d'exploitation;<br> |
|||
-de nombreux informaticiens le connaissent ;<br> |
|||
-il permet la minimisation de l'allocation mémoire nécessaire et la maximisation de la performance, notamment par l'utilisation de pointeurs ;<br> |
|||
-des compilateurs et bibliothèques logicielles existent sur la plupart des architectures ;<br> |
|||
-il a influencé de nombreux langages plus récents dont C++, Java, C# et PHP ; sa syntaxe en particulier est largement reprise ;<br> |
|||
-il met en œuvre un nombre restreint de concepts, ce qui facilite sa maîtrise et l'écriture de compilateurs simples et rapides ;<br> |
|||
-il ne spécifie pas rigidement le comportement du fichier exécutable produit, ce qui aide à tirer parti des capacités propres à chaque ordinateur ;<br> |
|||
-il permet l'écriture de logiciels qui n'ont besoin d'aucun support à l'exécution (ni bibliothèque logicielle ni machine virtuelle),<br> au comportement prévisible |
|||
-en temps d'exécution comme en consommation de mémoire vive, comme des noyaux de système d'exploitation et des logiciels embarqués.</p> |
|||
|
|||
|
|||
<h2>Quelques exemples de programmes basiques</h2> |
|||
|
|||
<p class="textprint">Tout d'abord il faut savoir que la façons "d'exécuter" des programmes en C et en python n'est pas la même. |
|||
Python est un interpréteur, il a donc besoins d'un interpréteur pour faire fonctionner ces programmes. |
|||
Le language C quand à lui est un language qui doit être compiler pour être éxécuter. C'est à dire que l'on compile d'abord notre projet en .exe pour l'éxécuter ensuite.<br><br> |
|||
|
|||
<img src="https://yard.onl/sitelycee/cours/c/lib/NouvelElement105.jpg" id="compilC" ><br><br> |
|||
|
|||
Pour un premier programme je vais vous montrez comment faire afficher un message. Pour cela nous allons utiliser la fonction printf avec le fameux "Hello world".<br> |
|||
Tout d'abord il faudra se rendre dans <a href="http://www.codeblocks.org/downloads">code blocks</a> qu'il faudra au préhalable installer. Vous pouvez utiliser un autre compileur mais les examples seront fait sur celui la.<br><br> |
|||
Dans ces exemples je ne vous montre pas comment créer un projet sur Code Block, ni comment mettre un compileur dessus (ex: GCC, MINGW, CLANG, etc...) car je juge cette étape assez simple d'accès avec de la documentation ou des tutos sur internet.</p> |
|||
|
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
<pre><code class="language-c">#include <stdio.h> |
|||
#include <stdlib.h> |
|||
|
|||
int main() { |
|||
printf("Hello World!"); |
|||
return 0; |
|||
}</code></pre> |
|||
</div> |
|||
|
|||
<p>Votre premier programme en C est très basique mais permet de bien comprendre les bases du langage. C est consommateur de caractères car il faut plusieurs lignes pour au final en afficher une seule!<br><br> |
|||
Tout programme en langage C doit contenir au minimum une fonction principale appelée main. Beaucoup de programme ne contienne dans cette fonction que des appels à d'autres fonctions.<br> |
|||
Sa syntaxe est relativement légère, trop parfois. Un laxisme dans le développement entraînera vite la production d'un code illisible et bourré de fautes. La seule syntaxe obligatoire, en dehors du main, est de finir chaque ligne avec un point-virgule ;<br> |
|||
Il faut également prendre l'habitude de bien identer son code. |
|||
</p> |
|||
|
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
<pre><code class="language-c">#include <stdio.h> |
|||
#include <stdlib.h> |
|||
|
|||
int main() { |
|||
printf("Hello World!"); |
|||
return 0; |
|||
}</code></pre> |
|||
</div> |
|||
|
|||
<p>Le script ci-dessus est totalement correct mais est bien moins lisible que celui d'avant.</p> |
|||
|
|||
<p><br>Maintenant que vous connaissez les bases, Vous pouvez réaliser un programme un peut plus complexe qui calcule l'aire d'un rectangle. Nous allons créez en premier temps le squelette:<br> |
|||
-inclusion des librairies essentielles: stdio et stdlib<br> |
|||
-corps du programme (main) |
|||
<br> |
|||
|
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
<pre><code class="language-c">#include <stdio.h> |
|||
#include <stdlib.h> |
|||
|
|||
int main () |
|||
{ |
|||
|
|||
}</code></pre> |
|||
</div> |
|||
|
|||
<p>La fonction main s'exécute dès lancement du programme.<br><br> |
|||
|
|||
Il vous reste à coder la demande l'utilisateur pour renseigner la longeur et largeur du rectangle, avant de calculer son aire.<br> |
|||
Pour cela il convient de définir les variables qui contiendront ces deux données et leur type. C'est facile , elles seront numériques, typées décimales, donc en langage <strong>C</strong> typées float<br><br> |
|||
Ajoutez à votre programme la définition des variables comme ci-dessous. Voici un exemple typique du laxisme facilement pris en <strong>C</strong>: on peut déclarer ces variables en global, ou en local.<br> |
|||
En 2 lignes:<br><br> |
|||
-déclaration globales: au même niveau que les include, hors de toute fonction. L'avantage est que le contenu de ces variables est accesible depuis toutes les fonctions. |
|||
<br><br>- déclaration locale: la variable n'est accessible que dans la fonction et ne reste pas en mémoire après son utilisation: le recyclage avant l'heure!<br> |
|||
<br>Vous déclarez une variable l pour la largeur, une variable L pour la longueur. Le<strong>C</strong> est sensible à la casse, voilà encore un exemple de ce que l'on peut faire en <strong>C</strong> mais que l'on ne doit pas faire: illisibilité, confusion,.. |
|||
</p> |
|||
|
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
<pre><code class="language-c">#include <stdio.h> |
|||
#include <stdlib.h> |
|||
|
|||
int main () |
|||
{ |
|||
float l,L; |
|||
}</code></pre> |
|||
</div> |
|||
|
|||
<p>Le <strong>C</strong> n'est pas le plus folichon des languages pour demander à l'utilisateur de saisir des données. Il est même lourd!. La fonction scanf qui joue ce rôle ne permet que de recevoir une information que de l'entrée standard stdin, c'est à dire le clavier. <br> |
|||
Il faut indiquer à l'utilisateur ce qu'il est sensé saisir par des printf. Lourd, très lourd..!<br> |
|||
</p> |
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
<pre><code class="language-c">#include <stdio.h> |
|||
#include <stdlib.h> |
|||
|
|||
int main () |
|||
{ |
|||
float l,L; |
|||
printf ("Entrez la largeur de votre rectangle : "); |
|||
scanf ("%f", &l); |
|||
printf ("Entrez la longueur de votre rectangle : "); |
|||
scanf ("%f", &L); |
|||
}</code></pre> |
|||
</div> |
|||
|
|||
<p>Votre oeil de lynx a tout de suite remarqué le symbole & à gauche de la variable. Cela indique que le contenu lu au clavier est stocké dans la variable, l ou L, selon la ligne. |
|||
<br>Enfin nous pouvons afficher le résultat en faisant le calcul directement</p> |
|||
|
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
<pre><code class="language-c">#include <stdio.h> |
|||
#include <stdlib.h> |
|||
|
|||
int main () |
|||
{ |
|||
float l,L; |
|||
printf ("Entrez la largeur de votre rectangle : "); |
|||
scanf ("%f", &l); |
|||
printf ("Entrez la longueur de votre rectangle : "); |
|||
scanf ("%f", &L); |
|||
printf ("L'aire du rectangle est de %.2f cm carré.\n", l * L); |
|||
} |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>l'affichage de l'aire est complexe me direz-vous. oui car il permet en une seule ligne de faire le calcul, le formater et de l'afficher.<br> |
|||
Détaillons tout cela:<br> |
|||
- printf permet d'afficher une chaîne de caractères et de remplacer certains caractères par le contenu d'une variable.<br> |
|||
Le %.2f aurait pu s'écrire se réduire à sa plus simple expression: %f, qui indique que ces caractères seront remplacés par la prochaine variable trouvée sur notre chemin, à savoir le résultat de l x L.<br> |
|||
Le résultat n'est pas formaté, c'est à dire que l'on va afficher une suite de décimales importantes derrière la virgule non significatives.<br> |
|||
L'expression %.2f signfie que l'on retourne un nombre décimal arrondi à deux chiffres derrière la virgule.<br><br> |
|||
Entrez la largeur de votre rectangle : 1.524<br> |
|||
Entrez la largeur de votre rectangle : 2.452<br> |
|||
L'aire du rectangle est de 3.74 cm carré.<br> |
|||
|
|||
Avec juste %f nous aurons eu en résultat:<br> |
|||
L'aire du rectangle est de 3.736848 cm carré.<br> |
|||
</p> |
|||
|
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
<pre><code class="language-c">#include <stdio.h> |
|||
#include <stdlib.h> |
|||
|
|||
int main (int argc, char *argv[]) |
|||
{ |
|||
float l,L; |
|||
printf ("Entrez la largeur de votre rectangle : "); |
|||
scanf ("%f", &l); |
|||
printf ("Entrez la longueur de votre rectangle : "); |
|||
scanf ("%f", &L); |
|||
printf ("L'aire du rectangle est de %f cm carré.\n", l * L); |
|||
return EXIT_SUCCESS; |
|||
} |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>Pour finir nous r'ajoutons le return qui permet de renvoyer dans ce cas precis une sortie de la fonction et donc du programme avec succès.<br><br> |
|||
|
|||
Et voila votre premier programme en C est finit vous n'avez plus qu'à l'éxécuter et à le tester.</p> |
|||
</div> |
|||
</div> |
|||
<div class="partie"> |
|||
<nav id="navigation"> |
|||
<li><a class="lien" href="#ancre1">Le C qu'est ce que c'est ?</a></li> |
|||
<li><a class="lien" href="#ancre2">Comment et par qui a été créé le C</a></li> |
|||
<li><a class="lien" href="#ancre3">Pourquoi est il beaucoup utilisé</a></li> |
|||
<li><a class="lien" href="#ancre4">Quelques examples de programmes basiques</a></li> |
|||
</nav> |
|||
</div> |
|||
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
|||
<script src="../js/scroll.js"></script> |
|||
|
|||
</body> |
|||
|
|||
|
|||
</html> |
|||
@ -0,0 +1,247 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>La programmation avec Jean-Lou</title> |
|||
<link rel="stylesheet" type="text/css" href="../css/style.css"> |
|||
<link rel="stylesheet" type="text/css" href="../css/prism.css"> |
|||
</head> |
|||
<body> |
|||
<nav> |
|||
<ul style="width: 1000px;"> |
|||
<li> |
|||
<a href="../Index.html">Accueil</a> |
|||
</li> |
|||
|
|||
<li class="menu-deroulant"> |
|||
<a href="#"class="ho_menu">Languages</a> |
|||
<ul class="sous-menu"> |
|||
<li><a href="python.html">Python</a></li> |
|||
<li><a href="c.html">C</a></li> |
|||
<li><a href="c++.html">C++</a></li> |
|||
</ul> |
|||
</li> |
|||
|
|||
<li class="menu-deroulant"> |
|||
<a href="#" class="ho_menu">Rasberry Pi</a> |
|||
<ul class="sous-menu"> |
|||
<li><a href="histoire.html">Histoire</a></li> |
|||
<li><a href="os.html">Mettre un os</a></li> |
|||
<li><a href="lecteur.html">lecteur NFC</a></li> |
|||
</ul> |
|||
</li> |
|||
|
|||
<li><a href="../interpreteur/interpreteur.html">Interpréteur</a></li> |
|||
</ul> |
|||
</nav> |
|||
|
|||
<div class="aligne"> |
|||
<div class="article"> |
|||
<h1 id="ancre1">Bienvenue sur la page de <a href="https://www.python.org/">Python</a> !</h1> |
|||
|
|||
<img id="img_python" src="../images/python.png"> |
|||
|
|||
<h2>Le <a href="https://www.python.org/">Python</a> qu'est ce que c'est ?</h2> |
|||
|
|||
<p><a href="https://www.python.org/">Python</a> est le langage de programmation open source le plus employé du monde.<br> |
|||
Ce langage c’est propulsé en tête de la gestion d’infrastructure,<br> |
|||
d’analyse de données ou dans le domaine du développement de logiciels.<br> |
|||
<br> |
|||
En effet, parmi ses qualités, Python permet notamment aux développeurs de se concentrer |
|||
<br> sur ce qu’ils font plutôt que sur la manière de le faire. Il a libéré les développeurs <br> |
|||
de contraintes fortes qui occupaient leur temps avec les langages plus anciens.<br> <br> |
|||
Ainsi, développer du code avec Python est plus rapide qu’avec d’autres langages.<br> |
|||
Une de ses forces est une implémentation du code simple, claire, une syntaxe épurée.<br> |
|||
De nombreuses librairies sont disponibles,couvrant la plupart des domaines, de la couche réseau à l'application utilisateur.<br> |
|||
<br></p> |
|||
<p id="ancre2">Il est très accessible pour les débutants, à condition de lui consacrer un peu de temps |
|||
<br>pour la prise en main. De nombreux tutoriels sont d’ailleurs disponibles pour l’étudier sur des sites Internet spécialisés ou sur des comptes Youtube. Sur les forums d'informatique, |
|||
<br> il est toujours possible de trouver des réponses à ses questions, puisque <br> |
|||
beaucoup de professionnels l'utilisent. </p> |
|||
|
|||
<h2>Comment et par qui a été créé le Python ?</h2> |
|||
|
|||
<p>En 1989, profitant d’une semaine de vacances durant les fêtes de Noël,<br> |
|||
Guido van Rossum utilise son ordinateur personnel pour écrire la première version du langage.<br> |
|||
Fan de la série télévisée Monty Python's Flying Circus, il décide de baptiser ce projet Python.<br> |
|||
Il s’est principalement inspiré d’ABC, par exemple pour l’indentation comme syntaxe<br> |
|||
ou les types de haut niveau mais aussi de Modula-3 pour la gestion des exceptions, du langage C et des outils UNIX</p> |
|||
|
|||
|
|||
<p class="creapythonom">Guido van Rossum </p> |
|||
<img id="ancre3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Guido-portrait-2014-drc.jpg/1280px-Guido-portrait-2014-drc.jpg" class="creapython"> |
|||
|
|||
|
|||
<h2>Pourquoi est-il beaucoup utilisé ?</h2> |
|||
|
|||
<p>Python a été conçu pour être un langage lisible. Il vise à être visuellement épuré. <br> |
|||
Par exemple, il possède moins de constructions syntaxiques que de nombreux langages <br> |
|||
structurés tels que C, Perl, ou Pascal.<br> |
|||
<br> |
|||
Python fait partie de la grande famille des langages interprétés. Cela assure une grande compatibilité d'un même programme entre systèmes d'exploitations différents (Microsoft Windows, Linux, ...).<br> |
|||
Il peut toutefois à l'aide de programmes externes être compilé.<br> |
|||
<br> |
|||
Les blocs sont identifiés par l'indentation, au lieu d'accolades comme en C ou C++,<br> |
|||
ou de begin ... end comme en Pascal ou Ruby. Une augmentation de l'indentation marque le début d'un bloc, et une réduction de l'indentation marque la fin du bloc courant.<br> |
|||
L'indentation de base en Python est de 4 espaces. <br> |
|||
<br> |
|||
Le script suivant peut vous montrer le principe de l'indentation : </p> |
|||
|
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
<pre><code id="ancre4" class="language-python">from PIL import Image |
|||
from PIL.ExifTags import TAGS, GPSTAGS |
|||
|
|||
lat = 0 |
|||
long = 0 |
|||
image1= Image.open('photo.jpg') |
|||
info = image1._getexif() |
|||
print(info) |
|||
geolocalisation={} |
|||
|
|||
|
|||
exif_data={} |
|||
for tag, value in info.items(): |
|||
key = TAGS.get(tag, tag) |
|||
if key =="GPSInfo": |
|||
gpsdata={} |
|||
for t in value: |
|||
sub=GPSTAGS.get(t,t) |
|||
gpsdata[sub]=value[t] |
|||
exif_data[key]=value |
|||
else: |
|||
exif_data[key]=value |
|||
print(exif_data) |
|||
|
|||
for valeur in exif_data.values(): |
|||
print("latitude: "+valeur[1]) |
|||
for i in {0,1,2}: |
|||
print(valeur[2][i][0]) |
|||
print("longitude: "+valeur[3]) |
|||
for i in {0,1,2}: |
|||
print(valeur[4][i][0]) |
|||
|
|||
lat = valeur[2][0][0]+valeur[2][1][0]/60+valeur[2][2][0]/3600 |
|||
|
|||
lon = valeur[4][0][0]+valeur[4][1][0]/60+valeur[4][2][0]/3600 |
|||
|
|||
print(f"latitude : {lat}") |
|||
print(f"longitude : {lon}") |
|||
</code></pre> |
|||
</div> |
|||
|
|||
|
|||
<h2>Quelques examples de fonctions basiques</h2> |
|||
|
|||
<p class="textprint">Tout d'abord, un interpréteur python est disponible sur ce site dans l'onglet <a href="Interpreteur.html">"Interpréteur"</a>. Si vous n'avez pas python sur votre machine ou pas d'éditeur sous la main vous pouvez utliser celui-ci.<br><br>Pour une première fonctions je vais vous montrez comment faire afficher un message.<br> |
|||
Pour cela nous allons utilisé la fonction <a href="https://apcpedagogie.com/la-fonction-print-en-python/" class="print">print</a> avec le fameux "Hello world".<br> |
|||
Rendez-vous sous IDLE ou dans l'onglet <a href="Interpreteur.html">"Interpréteur"</a> puis tapez la ligne ci-dessous, puis validez par un appui sur la touche "Entrée" du clavier.</p> |
|||
|
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
|
|||
<pre><code class="language-python">>>>Print("Hello World") </code></pre> |
|||
</div> |
|||
|
|||
<p>En éxécutant ce programme nous remarquons que "Hello world" est affiché sur la console</p> |
|||
|
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
|
|||
<pre><code class="language-python">>>>Print("Hello World") |
|||
Hello World |
|||
>>> |
|||
</code></pre> |
|||
</div> |
|||
|
|||
<p>Pour l'instant vous avez exécuté une ligne de programme dans une console.<br> |
|||
Le second programme vous montrera comment créer un programme en fichier et l'éxécuter.<br> |
|||
<br> |
|||
<br> |
|||
Sous IDLE, cliquez sur "File" puis "New File"</p> |
|||
|
|||
<img src="https://www.editions-eni.fr/Open/download/f9e47575-011b-4044-832a-74aad7bf6cf2/images/01RI16.png" class="creapscript"> |
|||
|
|||
<p><br>Une nouvelle fenêtre s'ouvre:</p> |
|||
|
|||
<img src="https://www.hashcollision.org/hkn/python/idle_intro/new_window_made.jpeg" class="feprogramme"> |
|||
|
|||
<p>Tapez votre programme dans celle-ci,<br> |
|||
puis enregistrez le avec l'extension ".py". Cette étape est importante,ne changez pas l'extension.<br> |
|||
Elle indique au système d'exploitation qu'il s'agit d'un programme écrit en Python.<br> |
|||
Une fois saisi, cliquez sur "Run" puis "Run Module".<br> |
|||
Le programme s'éxècute alors automatiquement.</p> |
|||
|
|||
<img id="ancre5" src="https://www.hashcollision.org/hkn/python/idle_intro/trying_to_run_script.jpeg" class="exprogramme"> |
|||
|
|||
<h2>Votre premier programme</h2> |
|||
|
|||
<p><br>Votre premier "vrai" programme calculera l'aire d'un rectangle. Comme vous le savez, c'est une tâche fastidieuse que vous exécutez tous les jours!<br> |
|||
<br> |
|||
L'algorithme est le suivant:<br> |
|||
- L'utilisateur saisie la longeur du rectangle dans la variable "longueur"<br> |
|||
- L'utilisateur saisie la largeur du rectangle dans la variable "largeur"<br> |
|||
- Le programme stockera dans une variable "aire" le résultat de la multiplication<br> |
|||
- Il affichera le résultat à l'écran avec un arrondi à 2 décimales<br> |
|||
<br> |
|||
<br> |
|||
Tous d'abord nous allons commencer par demander a l'utilisateur de rentrer la valeur <br> |
|||
de la longueur et de la largeur du rectangle.<br> |
|||
<br> |
|||
Commencez par demander a l'utilisateur de saisir les longueur et largeur du rectangle.<br> |
|||
La fonction "input" permet simplement de communiquer avec l'utilisateur.<br> |
|||
En une seule ligne elle énonce l'objet de ce qu'elle attend et récupère l'information dans une variable.<br> |
|||
Par défaut la fonction "input" stocke l'information sous forme de chaîne de caractère. Le calcul d'une aire se fait avec des nombres, |
|||
il faut donc utiliser une fonction de conversion,qui est float.<br> |
|||
</p> |
|||
|
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
<pre><code class="language-python">largeur = float(input("Veuillez entrer la largeur du rectangle : ")) |
|||
longueur = float(input("Veuillez entrer la longueur du rectangle : "))</code></pre> |
|||
|
|||
</div> |
|||
|
|||
<p>Puis on initialise une variable "aire" qui sera le calcul de l'aire du rectangle ( largeur * longueur)</p> |
|||
|
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
<pre><code class="language-python">largeur = float(input("Veuillez entrer la largeur du rectangle : ")) |
|||
longueur = float(input("Veuillez entrer la longueur du rectangle : ")) |
|||
|
|||
aire = largeur * longueur</code></pre> |
|||
|
|||
</div> |
|||
|
|||
<p>Nous teminons se programme par ajouter la ligne qui permet d'afficher la variable "aire".<br> |
|||
Pour cela nous utiliserons la même fonction que ci-dessus <a href="https://apcpedagogie.com/la-fonction-print-en-python/" class="print">print</a>, avec la variable aire.</p> |
|||
|
|||
<div id="script"> |
|||
<script type="text/javascript" src="../js/prism.js"></script> |
|||
<pre><code class="language-python">largeur = float(input("Veuillez entrer la largeur du rectangle : ")) |
|||
longueur = float(input("Veuillez entrer la longueur du rectangle : ")) |
|||
|
|||
aire = largeur * longueur |
|||
|
|||
print("L'aire du rectangle est : ", aire)</code></pre> |
|||
</div> |
|||
|
|||
<p>Voila, vous venez de terminer votre premier programme.<br> |
|||
Il ne vous reste plus qu'a l'exécuter.<br> |
|||
</p> |
|||
|
|||
</div> |
|||
|
|||
<div class="partie"> |
|||
<nav id="navigation"> |
|||
<li><a class="lien" href="#ancre1">Python qu'est ce que c'est ?</a></li> |
|||
<li><a class="lien" href="#ancre2">Création de Python</a></li> |
|||
<li><a class="lien" href="#ancre3">Pourquoi un tels succés ?</a></li> |
|||
<li><a class="lien" href="#ancre4">Examples de fonctions basiques</a></li> |
|||
<li><a class="lien" href="#ancre5">Votre premier programme</a></li> |
|||
</nav> |
|||
</div> |
|||
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
|||
<script src="../js/scroll.js"></script> |
|||
</body> |
|||
</html> |
|||
Loading…
Reference in new issue