Informatique et Sciences du Numérique

Informatique et Sciences du Numérique

Sommaire Introduction ISN et la pédagogie par le projet
Notions fondamentales du programme ISN ISN et la pédagogie par le projet Langages de description Eléments du langage HTML Architecture d’une application web statique Eléments du langage PHP Architecture d’une application web dynamique Réalisation d’un projet

Les quatre notions fondamentales du programme
Le programme est construit autour de quatre notions fondamentales: Représentation de l’information Algorithmique Langages et programmation 4.Architectures matérielles

ORGANISATION DE L’ANNÉE

Pérenniser le maintien à domicile des personnes vulnérables
Présentation du PROJET Pérenniser le maintien à domicile des personnes vulnérables

Pérenniser le maintien à domicile des personnes vulnérables
Service Détection de la détresse Service Confort de la personne Service Aide à la Prise de Médicaments Internet Plate-forme de Télésurveillance Gestion des alertes & coordination des aidants

ROBOT HUMANOIDE NAO

Maisons/Appartements
Pérenniser le maintien à domicile des personnes vulnérables : Service d’ Aide à la personne Liaison non filaire Wifi Réseau Internet Réseau domestique Maisons/Appartements

Langage HTML <html> <head> <title> </title>
Hyper Text Markup Language <html> <head> <title> </title> </head> <body> … </body> </html>

Langage HTML Le texte <HTML> <HEAD> <TITLE>
<BODY> texte simple<BR> <B>texte en gras</B><BR> <I>texte en italique</I><BR> <B><I>texte en gras et en italique</I></B><BR> <FONT SIZE=5>texte</FONT> <FONT COLOR="#0000FF">en bleu</FONT>  </BODY> </HTML>

Exercice 1 : Copier dans votre répertoire de travail (répertoire www\ISN\VOTRE_NOM\TP_HTML_PHP\) l’image "Robot.jpg" Créer une page HTML qui affiche le texte et l’image du robot :

Les images GIF ou JPEG? Les deux formats d'image reconnus sur le Web, sont le format GIF et le format JPEG. L'ennemi sur le Web, c'est la taille des images! Plus l'image sera grande, plus le temps de chargement sera long... au risque de décourager vos visiteurs. Voici le code Html mis en place pour pouvoir afficher des images : <img border="0" src=" Adresse de l'image" alt=""> Afficher l'image qui se trouve à l'adresse... Dimensions: width=? height=? Largeur et Hauteur et (en pixels)

Langage HTML Les liens Html est un langage hypertexte qui vous permet en cliquant sur un mot, généralement souligné, ou sur une image de vous diriger; vers un autre fichier Html situé sur votre ordinateur. vers un autre ordinateur situé sur le Web. La syntaxe de ces liens entre plusieurs pages, est simple : <A HREF="URL ou adresse">...</A> Le sigle URL (de l'anglais Uniform Resource Locator, littéralement « localisateur uniforme de ressource »), auquel se substitue le terme adresse web

Exercice 2 : Effectuer un lien vers une page « Afficher les températures de l'appartement »

Langage HTML Les tableaux
Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau. Les balises de base sont : Définition du tableau [Table] <TABLE></TABLE> Début et fin de tableau Définition d'une ligne [Table Row] <TR></TR> Début et fin de ligne Définition d'une cellule [Table Data] <TD></TD> Début et fin de cellule <HTML> <HEAD> <TITLE> Les tableaux </TITLE> </HEAD> <BODY> <TABLE> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> </BODY> </HTML>

Exercice 3 : Le robot NOA permet d'avoir les températures de la maison
Exercice 3 : Le robot NOA permet d'avoir les températures de la maison. Copier dans votre répertoire de travail l’image "Plan_Maison.jpg ". Créer une page HTML qui affiche les 8 valeurs de températures dans un tableau et l'image de la maison.

Langage HTML Les frames
Pour diviser l'écran en plusieurs fenêtres, les balises sont peu nombreuses : Zone avec des fenêtres <FRAMESET> Début de zone avec des fenêtres </FRAMESET> Fin de zone avec des fenêtres Agencement des fenêtres <FRAMESET ROWS="..."> Fenêtres horizontales <FRAMESET COLS="..."> Fenêtres verticales <HTML> <HEAD> </HEAD> <FRAMESET ROWS="30%,70%"> <FRAME> </FRAMESET> </HTML>

Langage HTML Les frames
Attention! <FRAMESET></FRAMESET> remplace <BODY></BODY> L'attribut ROWS="hauteur1,hauteur2,...,hauteurN" définit la hauteur des différentes fenêtres en cas de division horizontale. La hauteur s'exprime en pixels ou en %. Dans ce cas, on veillera à ce que le total soit égal à100%; L'attribut COLS="largeur1,largeur2,...,largeurN" définit la largeur des différentes fenêtres en cas de division verticale. <HTML> <HEAD> </HEAD> <FRAMESET ROWS="30%,70%"> <FRAME SRC=“Accueil.htm"> <FRAMESET COLS="30%,70%"> <FRAME SRC=“menu.htm"> <FRAME SRC=“parametre.htm"> </FRAMESET> </HTML>

Exercice 4 : Diviser l'écran en trois parties, la partie gauche est réservée
à des liens vers des pages qui seront réalisées dans la deuxième partie. La première partie est réservée à des informations générales : logo du Lycée ( logo_lycee.gif), date, .... …. Note : Pour afficher la date, utiliser le script proposé par le logiciel ScriptEdit ( voir onglet JavaScript)

Exercice 5 : Afficher les images de la caméra du Robot
Lorsque l’utilisateur clique sur le lien « Visualiser images du Robot », il obtient une page lui permettant de visualiser à distance les images. Pour avoir un flux vidéo, on peut utiliser la balise <img> <img src=" width="700" height="400">

Architecture d’une application WEB Statique
Serveur Postes clients Internet disque

Architecture d’une application WEB Statique:
Echanges entre les postes clients et le serveur disque Postes clients Internet <html> <head> <title></title> </head> <body bgcolor="black"> <br> <div align="center"><table border="0" bgcolor="white" height="92%" width="85%"> <tr> <td ><font face="Corbel" size="7" color=red><b><div align="center">ISN: Robot Humanoïde NAO</div></b></font></td> </tr> <td height="100%"> <div align="center"><img src="../images/Robot.jpg"></div> </td> </table></div> <font size="7"> <div align="center" color=#FF0000> <a href="Temperatures_Appart.htm">Afficher les températures de l'appartement</a> </div></font> </body> </html>

Le cheminement des pages sur le réseau Internet
Finaliser votre TP en organisant les fichiers puis en les téléchargeant grâce au protocole FTP sur un serveur Web. Cette activité permet de rendre compte ensuite du fonctionnement du site « en production » et d'expliciter le cheminement à partir de la requête du client jusqu'au retour du code HTML dont le contenu est interprété par le navigateur (notion d'architecture « client/serveur », de serveur « Web » , d'adressage Web, requête HTTP,...) Depuis le Lycée: Pour se connecter au serveur FTP : Hôte = Utilisateur = STAGE Mot de passe = USER Port = 4451 Pour tester votre programme : Depuis l'extérieur Hôte = Utilisateur = STAGE Mot de passe = USER Pour tester votre programme :

Hypertext Preprocessor

Sommaire Les étapes de programmation Structure séquentielle
ISN et la pédagogie par le projet ALGORITHME ET LANGAGE DE PROGRAMMATION Les étapes de programmation Structure séquentielle Structure conditionnelle Structure répétitive Structure à choix multiples Les tableaux Les fonctions

Critères pour choisir un environnement de développement
Techniques : simplicité d’utilisation, usage répandu (existence d’outils et d’une communauté d’utilisateurs), facilité d’installation, existence de librairies facilitant le développement . Economiques : Licences payantes ou non, liberté du téléchargement et de la redistribution . Standardisation : Choix de préférence des mêmes outils de développement utilisés dans les options , les autres spécialités ou en classe de 1er

Les étapes de programmation
Enoncé d’un problème Analyse du problème :Données du départ (entrées) Les résultats (sorties) Algorithme :La séquence d’étapes de calcul qui transforment l(es) entrée(s) en sortie(s). Les structures algorithmiques suivantes : Séquentielle(début ….fin), Conditionnelle(si…alors),Répétitive( tantque …. Fintanque) Choix multiples (selon …. cas 1 , cas2), et le fonctions Si la qualité est mauvaise Codage : Traduction de l’algorithme en un langage de programmation Exécution du programme : Vérifier la qualité du programme en le testant sur différents jeux de données.

Qu'est ce qu'un algorithme ?
Un algorithme se définit comme une procédure de calcul bien définie qui prend en entrée une valeur, ou un ensemble de valeurs. Et qui donne en sortie une valeur, ou un ensemble de valeurs. Un algorithme est donc une séquence d’étapes de calcul qui transforment l’entrée en sortie.

Structure d'un algorithme
l'entête : Nom de l'algorithme déclaration des variables : Les données de départ (entrées) Les résultats (sorties) Début // Les entrées ………………………… // Les traitements // Les sorties Fin La séquence d’étapes de calcul qui Transforment l’entrée en sortie.

PHP: Hypertext Preprocessor
EXEMPLE 1 : somme de 2 entiers

ALGORITHME : Structure Séquentielle
Enoncé: Ecrire un programme qui calcule somme de 2 entiers Donnée de départ (entrée ): varA , varB : entiers Résultats(sorties ): somme : entiers Début // Les entrées lire (varA) // Les traitements somme varA+varA // Les sorties Afficher (somme) Fin Les structures linéaires se caractérisent par une suite d'actions à exécuter successivement dans l'ordre énoncé.

Traduction en HTML Enoncé: Ecrire un programme qui calcule somme de 2 entiers Conception de l’Interface Homme Machine en HTML <html> <head> <title> Somme</title> </head> <body> Entrez Deux Entiers <form method="POST" action=" ………….php"> <input type="text" name="varA" size="20"> + <input type="text" name="varB" size="20"> <input type="submit" value=" = " name="envoyer"> </form> </body> </html>

Traduction en PHP Enoncé: Ecrire un programme qui calcule somme de 2 entiers Début // Les entrées lire (varA) lire (varB) // Les traitements somme varA+varB // Les sorties Afficher (somme) Fin <?php // déclaration des variables $a=0; $b=0; $somme=0; // Les entrées $a=$_POST[‘varA’]; $b=$_POST[‘varB’]; // Les traitements $somme=$a+$b; // Les sorties echo ˝la somme = $somme˝; ?>

ALGORITHME : Structure Séquentielle
Enoncé: Le montant des charges salariales, retenue au salarié par l’entreprise, s’élève à 22%.Ecrire un programme qui calcule à partir d’un salaire brut, le montant des charges et le salaire net. Donnée de départ (entrée ): salaire_brut : réel Résultats(sorties ): salaire_brut : réel charges : réel salaire_net : réel Début // Les entrées lire (salaire_brut) // Les traitements charges salaire_base * 0,22 salaire_net salaire_brut-charges // Les sorties Afficher (salaire_brut) Afficher (charges) Afficher (salaire_net) Fin Les structures linéaires se caractérisent par une suite d'actions à exécuter successivement dans l'ordre énoncé.

Architecture d’une application WEB dynamique
SERVEUR: Adresse IP= Système d’exploitation (OS) Serveur WEB disque Postes clients Internet Interpréteur PHP <?php // Déclaration des variables // Les entrées // Traitement // Sortie ?>

Architecture d’un application WEB dynamique:
Echanges entre les postes clients et le serveur Système d’exploitation (OS) Serveur WEB disque Postes clients Internet Moteur PHP <?php // Les entrées $a = $_POST['v1'] ; $b = $_POST['v2'] ; // Traitement $somme = $a+$b ; // Sortie echo "<br> la somme de $a + $b = $somme <br>"; } ?>

Les structures algorithmiques fondamentales
En algorithmique, il existe 4 grandes familles de structures : les structures linéaires (séquentielles) les structures alternatives (conditionnelles) les structures de choix les structures itératives (répétitives)

Les structures alternatives Les structures alternatives réduites
si condition alors séquence_1 d'instructions finsi Les structures alternatives complètes Si condition alors séquence_1 d'instructions sinon séquence_2 d'instructions finsi Si la condition est VRAI, on exécute la séquence_1 d'instructions puis le programme se poursuit après l'instruction finsi, sinon on exécute la séquence_2 d'instructions.

Les structures alternatives
On souhaite créer une application WEB qui permet aux utilisateurs de calculer l'indice de masse corporelle. L’indice de masse corporelle (IMC; en anglais, BMC: Body Mass Index) se calcule par la formule IMC=masse/ taille² ; où la masse est exprimée en Kilogrammes et la taille en mètres. IMC Interprétation (d'après l'OMS) moins de 16,5 Dénutrition 16,5 à 18,5 Maigreur 18,5 à 25 Corpulence normale 25 à 30 Surpoids 30 à 35 Obésité modérée plus de 40 Obésité massive 1) Écrire un algorithme et un programme (de coach) qui demande la taille et le poids, il calcule l’IMC et affiche un conseil. 2) Écrire un algorithme et un programme qui demande la taille et indique l’intervalle de poids « idéal »

Les structures itératives
Type 1 : Boucle POUR Lorsque le nombre de répétitions est connu d’avance: Pour variable allant de expression1 à expression2 avec pas de expression3 faire séquence d'instructions (traitement à répéter) fin pour Enoncé: Afficher « L’ascenseur se trouve à l’étage 1 », puis 2, 3, 4, 5, 6, 7, 8. puis 2, 3, 4, 5, 6, 7, 8,7,6,5,4,3,2,1

Type 2 : La structure Tant que...faire Dans cette structure on commence par tester la condition. Si elle est vérifiée, le traitement est exécuté. Tant que condition faire séquence d'instructions (traitement à répéter) fin tant que Enoncé: Afficher « L’ascenseur se trouve à l’étage 1 », puis 2, 3, 4, 5, 6, 7, 8,7,6,5,4,3,2,1 en utilisant qu’une seule boucle

Type 3 : La structure Répéter ...jusqu’à Dans cette structure, le traitement est exécuté une première fois puis sa répétition se poursuit jusqu'à ce que la condition soit vérifiée. Répéter séquence d'instructions (traitement à répéter) jusqu'à condition Exemple : Distributeur de boissons à pièces

Distributeur de boissons à pièces Au Lycée, on peut, à la récré, se servir une boisson au distributeur de boissons. On sélectionne d'abord, sur la liste (menu boissons) des produits disponibles: (1) café = 40 centimes (2) café + lait = 40 centimes (3) chocolat = 35 centimes (4) thé = 35 centimes (5) thé froid = 30 centimes On introduit d'abord une somme en pièces de monnaie. Cette somme doit être suffisante. Après le service, l'appareil rend la monnaie en pièces de : 1€ , 0.50 € , 0.2 € , 0.10 €, 0.05 € Exemple : message = "Sélectionner la boisson désirée: " boisson = 1 message = "Introduire la somme: " somme = 20 centimes message = "Somme insuffisante, recommencez !" somme = 50 centimes message = « Somme suffisante , Votre boisson et en préparation " Enoncé: Ecrire l’algorithme qui compte le nombre de pièces introduite par l’utilisateur ,

Les structures de choix
Les structures de contrôle de choix permettent de choisir la suite d'instructions à exécuter en fonction de la valeur prise par l'expression initiale : selon (expression parmi) cas const_1 : séquence_1 d'instructions cas const_2 : séquence_1 d'instructions cas const_3 : séquence_1 d'instructions cas const_4: séquence_1 d'instructions autre cas : séquence d'instructions fin selon

Les structures de choix
Reprendre l’exercice sur Distributeur de boissons à pièces et utiliser cette structure pour compter le nombre de pièces

Les tableaux Déclaration d’un tableau:
On appelle tableau une variable composée de données de même type, stockée de manière contiguë en mémoire (les unes à la suite des autres). Un tableau est donc une suite de cases (espace mémoire) de même taille. La taille de chacune des cases est conditionnée par le type de donnée que le tableau contient. Déclaration d’un tableau: Tableau Note[12] en Entier Tableau Temperature[50 ] en Réel

Manipulation des tableaux
On donne un tableau, qui représente une ligne de relevé de température $temp=array(28.1,28.1,28.1,28,27.9,28.1,28,28.3,28.4,28.3,28.1 ,28.1,27.7,27.9,27.9,27.8,27.9,27.9,27.9,27.8,27.7,27.7,27.8,27.7,27.4, 27.5,27.6,27.4,27.2,27.4,27.4,27.4,27.4,27.4,27.5,27.4,27.2,27.1,26.9,26.6, 27,26.9,27.2,27.1,27.2,27.2,27.2,26.9,27.2,27.4,27.6,27.5,27.8,27.7,27.6,28, 27.9,27.8,27.8,28,28.4,28,27.9,27.9,28,28.1,28.7,30.5,31.9,32.4,32.5,32.9,32.9, 33.3,33.2,33.2,33.3,33.6,33.5,34,33.8,33.8,33.9,33.7,33.6,33.6,33.5,33.5,33.1, 33.4,33.1,32.7,32.6,32.5,32.7,32.7,32.7,32.9,32.5,32.5,32,31.8,31.5,30.1,28.4, 27.6,27.3,26.9,26.7,26.8,27.2,27.1,27,27,27.1,27.4,27,26.7,26.6,27,26.2,25.8,25.9, 26,26.5,25.7,25.5,25.1,25.5,25.8,25.2,24.9,24.7,26.3,25.1,25.4,26.2,26.5,26.6,27.4, 27.6,27.7,27.4,26.6,26.3,26.7,26.8,26.9,26.7,26.7,26.9,27.5,27.7,27.4,27.7,27.3,27.4,27.5,27.5,27.5); Ecrire les algorithmes suivants : Afficher le tableau des températures tableau avec la présentation suivante (10 températures par ligne): 28.1 , 28.1,28.1,28,27.9,28.1,28,28.3,28.4,28.3 28.1,28.1,27.7,27.9,27.9,27.8,27.9,27.9,27.9,27.8 …………………………………………………………………………………………………………………………………. Afficher la température la plus basse et sa position dans le tableau Afficher la température la plus élevée et sa position dans le tableau Afficher les 10% des températures les plus élevées Afficher les 10% des températures les plus basses.

Les fonctions Les fonctions permettent de décomposer un
programme complexe en une série de sous-programmes plus simples. Il existe 3 types de fonctions : Fonctions sans passage d’arguments et ne renvoyant rien au programme; Fonctions sans passage d’arguments et renvoyant une valeur au programme; Fonctions avec passage d’arguments.

Exercices types en ISN SORTIES ENTRÉES TRAITEMENTS Les Sorties:
Lecture des entrées: Clavier; Fichiers; Capteurs; Liaison série; Réseau Les Sorties: Affichage des résultats à l’écran; Persistance de l’information: Fichier ou Base de données ; Commande des actionneurs; Traitement des données: Algorithmique;

ÉCHANGES SUR L’ALGORITHME ET PROGRAMMATION

Utilisation du moteur de recherche google
Les règles de base: 1) Trouver l’expression exacte :"morphologie des pingouins " 2) Recherche dans le titre : intitle: cheval 3) Recherche dans le corps de la page : "appel téléphonique " intext: " pas cher " 4) Opérateur OR :poulet " à la crème" OR " aux olives " 5) Opérateur * : "mille pattes a * pattes" 6) Formats de fichiers : " Lettre de motivation " filetype:doc (pdf,xls,ppt,rtf,txt,wri ……..) : Les alertes envoyées par mail : Créer une page google personnalisée : Spécialisé dans la recherche universitaire. : Le site interstices : Science Informatique au Lycée + Un site sur le langage de programmation utilisé (

Informatique et Sciences du Numérique

Présentations similaires

Présentation au sujet: "Informatique et Sciences du Numérique"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back

Entrer

S'autoriser via un réseau social:

Informatique et Sciences du Numérique

Présentations similaires

Présentation au sujet: "Informatique et Sciences du Numérique"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back