ORGANISATION DE L’ENSEIGNEMENT Informatique et Sciences du Numérique ORGANISATION DE L’ENSEIGNEMENT
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 Formation en HTML Faire les exercices 1,2,3 et 4 Hyper Text Markup Language Formation en HTML Faire les exercices 1,2,3 et 4
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> </body> </html>
Langage HTML Le texte <HTML> <HEAD> <TITLE> <BODY> texte simple<BR> <B>texte en gras</B><BR> <STRONG>texte en gras</STRONG><BR> <I>texte en italique</I><BR> <EM>texte en italique</EM><BR> <B><I>texte en gras et en italique</I></B><BR> <FONT SIZE=5>texte</FONT> <FONT COLOR="#0000FF">en bleu</FONT> <!--C'est fini--> </BODY> </HTML>
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
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 SRC="Adresse de l'image"> Afficher l'image qui se trouve à l'adresse...
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>
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>
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> </body> </html>
Travaux Pratiques DEUXIEME PARTIE: PHP 1 ) Présentation du langage PHP ( balises, variables…) 2) Création de la première page WEB dynamique: Somme de deux entiers
Architecture d’une application WEB dynamique SERVEUR: Adresse IP=195.221.154.52 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 site 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>"; } ?>
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 ……..) http://www.google.com/alerts : Les alertes envoyées par mail http://scholar.google.fr/ : Spécialisé dans la recherche universitaire. http://interstices.info : Le site interstices https://science-info-lycee.fr/ : Science Informatique au Lycée + Un site sur le langage de programmation utilisé (http://www.developpez.com)