Diaporama

2017

2019

arts plastiques

Infos utiles
Vie scolaire
Activités au Collège

Fermer Anglais

Fermer Culture

Fermer ESPAGNOL

Fermer Education Musicale

Fermer Français

Fermer Mathématiques

Fermer Secourisme

Fermer classe "jardin d'histoire"

Fermer classe patrimoine

Fermer club

Fermer voyage

CDI
Disciplines
Informations

Fermer Recyclage

Fermer sorties scolaires

Evènements
numerique/PHETLOGO.jpgNumérique - Intégration de simulations interactives en cours

La physique, la chimie, les sciences de la terre, la biologie, les mathématiques et certaines techniques de pointe font l'objet de simulations pédagogiques passionnantes destinées à être partagées par des millions d'enseignants à travers le monde à partir d'un site de l'université du Colorado (phet.colorado.edu)

Certaines simulations sont dotées de paramétrages ludiques dont la sophistication en font de véritables serious games.

Comment mobiliser efficacement ces simulations pour les intégrer à ses propres cours ?

Nous vous proposons à cet effet d'acquérir quelques bases de html.

Cet article a pour objet de permettre à tout enseignant la création d'une page web simple incorporant des animations externes telles que celles fournies sur le site web de l'université  du Colorado.

Nous aborderons ici uniquement des notions de base. :

Les balises :

Les contenus d'une page html sont structurés grâce a des balises contenues entre les caractères spéciaux - (chevron ouvrant, chevron fermant) - suivants : < , >

Le html est un langage de mise en forme qui interprète des balises (ou tags)

Une balise entrante est de la forme : <mabalise>

Une balise sortante est de la forme : </mabalise> (Il s'agit de la même balise avec un slash)

Exemple :

Pour dire au navigateur internet que la page à lire est en langage html, la première balise de la page sera : <html> et la dernière sera </html> Toutes les autres balises seront contenues entre ces balises html.

Autre exemple :


pour qu'un texte quelconque apparaisse en exergue (renforcé ou gras selon l'humeur du navigateur), on va l'encadrer par 2 balises strong, on aura donc une ligne de la forme : <strong>mon texte quelconque à afficher en gras</strong>

Une balise peut être dotée d'un attribut :

Exemple :

<img src="repertoireimages/mon_image.jpg"/>:

Cette ligne signifie que a balise <img> (pour afficher une image) est dotée de l'attribut src (source) contenant le chemin vers l'image

Exemple :

<a href="../index.htm">Retour index</a>

Cette ligne signifie que la balise <a> (pour créer un lien vers une page) est dotée de l'attribut href contenant le chemin vers la page à relier.

Structure de la page html

Les premières lignes de code d'une page html contiennent des déclarations de version du langage html utilisé puis un en tête défini par les balises <head> </head>

A l'intérieur de ces balises head, on va placer des informations qui ne doivent pas être mises en forme et affichées au même titre que le corps de la page.

On y placera les meta tags (balises title, description etc destinées en partie aux robots d'indexation), l'encodage des caractères choisi (UTF8 par exemple) ou le chemin vers une feuille de style CSS mais tout cela n'est pas indispensable pour faire ses premiers pas en html.

Sous l'entête, on va placer les balises de corps de page (<Body></Body>) contenant au départ le titre de la page puis d'autres contenus (liens, images, paragraphes, images de boutons de navigation etc)

Créer la structure de base d'une page html se résume donc à très peu de choses :

  1. Ouvrir un éditeur de texte quelconque (bloc note de windows si l'on a pas d'éditeur html)

  2. Créer les balises entrantes et sortantes <html>, y intégrer les balises <head> et <body> (et <title></title> ainsi que <H1></H1>pour afficher le titre en gros caractères)

On aura donc dans notre fichier .txt des balises imbriquées de la sorte :

<html>

<head>

<title>Mon titre de page affiché dans l'onglet du navigateur</title>

</head>

<body>

<H1>Mon titre de page affiché dans ma page</H1>

<br>

</body>

</html>

Pour voir notre page interprétée par un navigateur, on remplace l'extension .txt par .htm et l'on double clique sur le fichier html ainsi créé.

Cette méthode est correcte pour des pages très simples mais dès que l'on touche à des pages complexes, un vrai éditeur html est nécessaire.

Une page telle que nous venons de la décrire, sera réduite à afficher seulement un titre avant d'être enrichie.

En y ajoutant par la suite des éléments, il conviendra de commenter son code pour non seulement s'y retrouver mais encore pour qu'une autre personne puisse déboguer ou modifier la page. Pour éviter que les commentaires s'affichent dans la page, les balises dédiées sont <!-- et -->

Exemple :

<!-- Commentaire, ce texte n'est pas interprété par le navigateur -->

Saut de lignes

Une autre balise utilisée dès les premiers pas en html permettra de gérer des sauts de ligne :

Exemple :

Ligne de texte 1<br>Ligne de texte 2...

...affichera la ligne 2 sous la ligne de texte 1

(Les navigateurs interprètent généralement cette balise sans qu'elle soit nécessairement refermée, ce qui est plutôt une exception)

Pour intégrer des animations du site Universitaire du Colorado à une page hml, il suffit de l'éditer (code source) et de copier/coller les codes fournis par le site.

Chaque code permet d'afficher une image accompagnée d'une invitation à cliquer pour lancer une animation ou simulation en java ou flash.

Exemple :

  1. Préparer une page html simplifiée telle que décrite plus haut

  2. Se rendre sur le site : http://phet.colorado.edu/fr/simulations/category/physics

  3. Choisir une animation puis sélectionner le bouton « intégrer » situé sous la fenêtre d'animation

  4. Copier le morceau de code html

  5. Coller ce code dans la page html

  6. Recommencer avec d'autres animations en gérant des sauts de lignes <br> pour séparer les animations

  7. Tester la page en html dans un navigateur

  8. Ajouter des textes à votre guise

  9. Approfondir un peu votre pratique du html pour enrichir la page (ajout de bannières, ancres etc...)

  10. Si tout marche bien, la partie <body> de votre page peut être copiée collée en code html dans une page du site du collège

 

Démonstration :


voici quelques simulations intéressantes affichées par cette méthode

 


Apprendre la conservation de l'énergie avec un skateur :


Comportement de la lumière à travers des prismes :


La couleur : un résultat d'une synergie lumière, oeil, cerveau :

 
Vous avez une question afférente à cet article ? Contactez Pascal Monpouet via Educhorus

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


Date de création : 19/11/2013 @ 10:48
Dernière modification : 19/11/2013 @ 12:52
Catégorie : Numérique
Page lue 1751 fois

Imprimer l'article Imprimer l'article


Accès à l'ENT

ent2.PNG

bureau du professeur
bdp.jpg
Rédacteur


Nombre de membres23 rédacteurs
Rédacteur en ligne : 0
^ Haut ^