Initiation au développement Web pour l’enseignement non spécialisé

  • Réalisation de parcours en ligne, accessible de partout
  • Mise en relation des supports pour correspondre à la progression pédagogique
  • Connaitre le fonctionnement des sites web
  • Mise à disposition des supports aux élèves facilement

 

Fonctionnement d’un site Web

 

Image1,auteur Luc Frébourg

 

 

Modification d’un parcours Eléa

Récupération d’un parcours

  • Accéder à Elea.
  • Accéder à la EleaTech .
  • Rechercher le parcours « Savoir Argumenter » de Raphaëlle PEAN.
  • Télécharger celui-ci.
  • Importer le parcours dans votre espace, voir Etape 2 du lien.

Modification du parcours

  • Modifier la couleur des titres de la section 1
  • Activer le mode Edition
  • Cliquer sur « Modifier » puis « modifier la section » dans le 1er paragraphe
  • Cliquer sur le bouton avancé en mode édition puis sur HTML (bouton <>)

Remplacer le code HTML d’Eléa par celui-ci :

<h4 style="text-align: center;">Ce parcours va vous permettre d'améliorer vos compétences en argumentation, grâce à 2 modules :</h4><h3 style="text-align: center;"><span class="" style="color: rgb(239, 69, 64);">1</span><sup><span class="" style="color: rgb(239, 69, 64);">er</span></sup><span class="" style="color: rgb(239, 69, 64);"> module : Comprendre ce qu'est l'argumentation (1h)</span></h3><h3 style="text-align: center;"><span class="" style="color: rgb(239, 69, 64);">2</span><sup><span class="" style="color: rgb(239, 69, 64);">ème</span></sup><span class="" style="color: rgb(239, 69, 64);"> module : Développer une argumentation (1h)</span></h3><h4 style="text-align: center;"><br></h4><h4 style="text-align: center;">Chaque module comprend plusieurs activités qu'il faut réaliser dans l'ordre.</h4><h4 style="text-align: center;">A la fin de ce parcours, vous pourrez obtenir un badge de réussite.</h4><p style="text-align: center;"><br></p><h3 style="text-align: center;">Pour commencer, cliquez sur la première activité de la carte !<br></h3>

La couleur correspond à style= »color: rgb(239, 69, 64); »

Remarque : il est également possible d’indiquer directement l’URL de l’image sans la télécharger si elle est sur internet.

  • Cliquer sur le bouton avancé en mode édition puis sur HTML (bouton <>)
  • Grâce à la propriété style dans la balise img de l’image, ajouter un coin arrondi.
border-radius: 20px;

Le code ressemble à ceci :

<img style="border-radius: 20px;" src="https://communaute.elea.ac-versailles.fr/draftfile.php/48106/user/draft/135991913/google.png" alt="google" width="600" height="399" class="img-responsive atto_image_button_text-bottom">

et l’image possède des coins arrondis

  • Ajouter une couleur de fond au titre de cette section dans la balise <h3> Message à destination des enseignants, invisible pour les élèves.
<h3 style= "background-color: pink" >

 

Remarque : le code Javascript n’est pas pris en compte.

 

Quelques notions de HTML

Une page web statique n’utilisera pas de programme dans un langage donné (PHP ou autre) pour rendre le contenu dynamique. On utilise le HTML pour réaliser des pages Web.  C’est un langage de balisage de 1993.  On associe souvent ce langage avec le CSS et le JavaScript pour obtenir le rendu désiré.

La structure d’une page HTML

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8"/>
    <title>ma page</title>
</head>
<body>
bonjour !
</body>
</html>

Les balises

HTML contient environ 140 balises qui fournissent au navigateur des indications sur le sens d’un élément, son interprétation ou son affichage. Les navigateurs affichent différemment certaines balises spécifiques (date, couleur).

Exemples de balises :

Ces balises permettent de définir des titres de différents niveaux

<h1>mon titre</h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Cette balise est utilisée afin de créer des liens vers des ressources externes : une autre page web, un e-mail, une image, une autre section du document, etc.

<a href="https://frebourg.es">site de destination</a>

Ces balises permettent d’ajouter une ressource vidéo ou audio.

<video controls src="video.ogv">description</video>


<audio controls>
 <source src="horse.ogg" type="audio/ogg">
 <source src="horse.mp3" type="audio/mpeg">
</audio>

 

Création d’un mini site Web en HTML

Création d’un fichier livres.html

  • Utiliser un éditeur de texte permettant la coloration syntaxique des éléments HTML (SublimeText , Nodepad++, Atom, Brackets, Visual Studio par exemple ).


Image3,auteur Luc Frébourg

 

  • Copier le code suivant puis coller celui ci dans l’éditeur de texte. Enregistrer celui-ci dans un fichier livres.html  (dans le dossier que vous avez précédemment créé). On vérifiera que l’extension du fichier est bien html.

Remarque : Sous Windows, dans un explorateur, onglet affichage, cocher extensions des noms de fichiers.


Image4,auteur Luc Frébourg

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>ma page</title> 
</head> 
<body> 
	<h1>La monnaie</h1>
	<h2>John Law de Lauriston</h2> 
		<img src="JohnLawdeLauriston.jpg" alt="JohnLawdeLauriston">
	<h2>Quelques livres sur la monnaie</h2> 
	 <ul> 
	 	<li><a href="HistoryMoneyAncientTimestoPresent.html">A History of Money from Ancient Times to Present Day </a><br> Glyn Davies, <br> University of Wales Presse, nouvelle édition, 2005.</li> 
	 	<li><a href="HistoryMoneyAncientTimestoPresent.html">The Ascent of Money </a><br> A Financial History of the World <br> Niall Ferguson, Allen Lane, 2008.</li> 
	 	<li><a href="HistoryMoneyAncientTimestoPresent.html">D’or et d’argent </a><br> La monnaie en France du Moyen Age à nos jours <br> Collectif, Comité pour l’histoire économique et financière de la France, 2005.</li> 
	 </ul> 
</body> 
</html>

Création d’un fichier JohnLawdeLauriston.jpg

  • Enregistrer dans le même dossier l’image suivante sous le nom de  JohnLawdeLauriston.jpg en cliquant sur le lien (ouvrir l’image puis faire un clic droit sur l’image, puis « enregistrer l’image sous » dans le répertoire).
  • Penser à renommer le fichier image avec le nom suivant : JohnLawdeLauriston.


 Image5,auteur Casimir Balthazar (1811-1875),

  • Afficher la page « livres.html » en double cliquant sur le fichier et en choisissant un navigateur (Internet explorer, Chrome etc).
  • Tester les liens.
  • En accédant au code la page,  modifier le titre <title>ma page</title> par <title>Les livres de John Law de Lauriston</title>.

Remarque : Sous Windows, dans un explorateur, clic droit sur le fichier, ouvrir avec et sélectionner l’éditeur de texte ou  glisser le fichier dans l’éditeur de texte qui s’ouvrira automatiquement.


Image6,auteur Luc Frébourg

 

Création d’un fichier HistoryMoneyAncientTimestoPresent.html 

  • Copier le code suivant puis dans l’éditeur de texte, enregistrer un fichier HistoryMoneyAncientTimestoPresent.html comme vu précédemment.
<!DOCTYPE html> 
<html> 
<head>
  <meta charset="utf-8"/>
  <title>History of Money</title>
</head>
<body> 
  A History of Money from Ancient Times to Present Day


  Présentation de l'éditeur
  This is a straight-forward, readable account, written with the minimum of jargon, of the central importance of money in the ordinary business of the life of different peoples throughout the ages from ancient times to the present day. Includes the Barings crisis and the report by the Bank of England on Barings Bank; up-to date information on the state of Japanese banking and the changes in the financial scene in the US. It also touches on the US housing market and the problem of negative equity. The paradox of why more coins than ever before are required in an increasingly cashless society is clearly explained, as is the role of the Euro coin as the lowest common denominator in Europe s controversial single currency system.
  Biographie de l'auteur
  Glyn Davies, deceased, was an Emeritus Professor of the University of Wales and Economic Advisor to Julian Hodge Bank Ltd. His former positions include Sir Julian Hodge Professor of Banking and Finance and Head of Department for Economics and Banking, U.W.I.S.T, Cardiff. He was also Senior Economic Advisor to the Secretary of State for Wales and Economic advisor and Director of the Bank of Wales.  
</body> 
</html>

 

  • Définir le titre du livre en h1, après <body> <h1> A History of Money from Ancient Times to Present Day </h1>
  • Avant « Biographie de l’auteur » saisir <br> pour revenir à la ligne.

 

Création d’un fichier OretArgent.html

  • Enregistrer le code suivant dans un fichier OretArgent.html.
<!DOCTYPE html>
 <html>
  <head> <meta charset="utf-8"/> <title>D'or et d'argent</title> </head>
  <body> 
  	<h1>D'or et d'argent. La monnaie en France du Moyen Âge à nos jours</h1>


  <img src="" alt="D-or-et-d-argent">

  <h2>Collectif</h2>

  Lors de la préparation du passage à l’euro, le Comité pour l’histoire économique et financière de la France a souhaité accompagner cet événement monétaire par une série de conférences intitulée « Les Français et leur monnaie : le louis, le franc, l’euro et les autres ». Cinq historiens de renom – Jean Favier, Guy Antonetti, Jean Tulard, Alain Plessis et Jean-Charles Asselain – ont répondu à l’invitation en offrant aux auditeurs une réflexion sur la monnaie en France du Moyen Âge à nos jours.Une table ronde, réunissant Raymond Barre, Jacques Delors et plusieurs hauts fonctionnaires acteurs des réformes monétaires des trente dernières années, ainsi qu’une allocution de Laurent Fabius, alors ministre de l’Économie, des Finances et de l’Industrie, ont clôturé ce cycle le 18 février 2002, lendemain du retrait de la monnaie nationale.<br><br>

  Ces textes accessibles au plus grand nombre, accompagnés de glossaires et d’une chronologie détaillée, offrent des points de repère précis sur l’histoire de la monnaie depuis la naissance du franc en 1360 jusqu’à l’avènement de l’euro. Ces interventions soulignent l’importance de la monnaie comme instrument économique et financier et comme symbole et outil politiques. Elles rappellent également les conséquences des évolutions monétaires successives sur la vie quotidienne des Français. Cet ouvrage, préfacé par Thierry Breton ministre de l’Économie, des Finances et de l’Industrie, intéressera aussi bien les étudiants en histoire économique et financière que les numismates, et plus largement tous ceux qui auront connu la fin du franc. 

   <body>
<html>
  • Définir l’image du livre  grâce à celle hébergée sur le web en indiquant l’URL suivant dans src : https://www.economie.gouv.fr/files/files/directions_services/igpde-editions-publications/dor_et_dargent_230x316.jpg
  • Code à copier :
    <img src= »https://www.economie.gouv.fr/files/files/directions_services/igpde-editions-publications/dor_et_dargent_230x316.jpg » alt= »D-or-et-d-argent »>

  • Modifier livres.html pour lui permettre de pointer sur OretArgent.html en remplaçant le code <a href= »HistoryMoneyAncientTimestoPresent.html »>D’or et d’argent </a> par <a href= »OretArgent.html »>D’or et d’argent </a>

 

Cascading Style Sheets

Le langage CSS ou Cascading Style Sheets correspond à des feuilles de style en cascade. Ce langage existe depuis les années 90. Le CSS permet de transformer l’apparence des pages HTML.

Notion de cascades

Le CSS permet de déclarer les styles seront différentes manières. Ils seront plus ou moins prioritaires selon l’endroit où ils sont déclarés. Il y a donc un effet de cascade qui remplace le précédent. Voici les trois façons de déclarer du CSS :

  1. Déclarer les feuilles de styles dans un fichier externe. C’est la solution la plus utilisé mais c’est celle qui est le moins prioritaire.
  2. Déclarer les styles en interne, dans l’en-tête de la page. Ils passent en second. Il ne faut réserver cette solution que pour des styles spécifiques.
  3. Déclaration des styles en attributs des éléments HTML. C’est le plus prioritaire, à éviter.

Déclarations

Pour les déclarations externes, dans un fichier style.css

sélecteur {
propriété: valeur;
}

Puis dans le fichier HTML

<link href="style.css" rel="stylesheet" type="text/css">

Sélecteurs

Soit on sélectionne directement un type de balise HTML

h1{
color : yellow;
}

Soit on définit une classe CSS

.yellow{
color : yellow;
}

<span class="yellow" >mon code</span>

Il existe d’autres sélecteurs.

Marges


 Image7,auteur Charles Calvert, The CSS Box Model,

margin indique l’espacement qui sépare un élément d’un autre.
padding indique les espacements intérieurs.

margin-top:2px;
margin-right:5px;
margin-bottom:2em;
margin-left:0;

margin:2px 5px 2em 0;

margin:2px 0;

margin : top right bottom left 
margin : top-bottom left-right

 

Mise en pratique : Modification avancée de pages Web

Création d’un fichier livres.css

  • Copier le code CSS suivant dans l’éditeur de texte et enregistrer le fichier livres.css
h1{
 color : blue; 
}
  • Ouvrir dans l’éditeur de texte le fichier livres.html comme vu précédemment.
  • Copier le code suivant dans la balise <head> de livres.html
<link href="livres.css" rel="stylesheet" type="text/css">
  • Tester la page dans un navigateur pour vérifier la bonne importation du fichier CSS
  • Ouvrir dans l’éditeur de texte la page livres.html
  • Ouvrir livres.html dans votre navigateur
  • Définir une classe nommée livresimage pour la balise img de livres.html. <img src= »JohnLawdeLauriston.jpg » class= »livresimage » alt= »JohnLawdeLauriston »>
  • Ajouter le code suivant à livres.css
.livresimage{
  max-width: 30%;
}
  • Rafraîchir livres.html dans votre navigateur et observer s’il y a une différence. L’image ne devrait pas dépasser une certaine taille, ici 30% de la page.
  • Définir une div  avec un identifiant livresdiv autour du texte de livres.html
<div id="livresdiv">
<ul> <li><a href="HistoryMoneyAncientTimestoPresent.html">A History of Money from Ancient Times to Present Day </a><br> Glyn Davies, <br> University of Wales Presse, nouvelle édition, 2005.</li> <li><a href="HistoryMoneyAncientTimestoPresent.html">The Ascent of Money </a><br> A Financial History of the World <br> Niall Ferguson, Allen Lane, 2008.</li> <li><a href="HistoryMoneyAncientTimestoPresent.html">D’or et d’argent </a><br> La monnaie en France du Moyen Age à nos jours <br> Collectif, Comité pour l’histoire économique et financière de la France, 2005.</li> </ul>
</div>

 

  • Ajouter des marges internes sur la div livresdiv, dans le fichier CSS, ajouter #livresdiv{ padding: 5%}
  • Modifier la police du texte de livres.html en ajoutant le code suivant (ajouter ce code à #livresdiv{ padding: 5%})
#livresdiv{

padding: 2%;

font-family: Comic Sans MS, Comic Sans, cursive;

}

 

Remarque: le CSS n’est pas toujours actualisé, il faut rafraîchir la page en vidant le cache du navigateur (ctrl+f5) et parfois insister…
On pourra voir une solution pour forcer le navigateur à rechercher tous les éléments.

 

 

Pour aller plus loin

Inspecter son code dans le navigateur

Image8,auteur Luc Frébourg

 

  • Modifier la couleur du texte directement grâce au navigateur grâce à la div livresdiv .
    • Sélectionner la ligne  <div id= »livresdiv »> dans la page de code
    • Ajouter le code color: red (voir ci-dessous)


Image9,auteur Luc Frébourg

 

Design d’un site web

Pour la réalisation d’un design, on utilise des Templates (maquettes de page modifiables) ou un ensemble d’outils appelé Framework (par exemple Bootstrap ). On peut également utiliser des CMS, content management system (par exemple WordPress hébergé soi-même ou pas) qui permet de réaliser des sites web « presque » sans coder.

Image10,auteur Luc Frébourg, thème Avada customisé

L’hébergement des applications et des données

 

Le concept de Cloud est la location de ressources informatiques en ligne.

https://nsa.gov1.info/utah-data-center/
https://fr.wikipedia.org/wiki/Utah_Data_Center

 

http://www.datacentermap.com/

 

 


Image11,auteur IBM, Global location for global business, ?

Image12,auteur  Tomasz Stachlewski, Amazon S3, ?

Image13,auteur  Google, Discover our datacenter, ?

 

Image14,auteur  Microsoft, Région Azure, ?

 

Image15,auteur  Alibaba, Centres de données mondials d’Alibaba Cloud, ?

 

 

 

 

Les principaux langages du Web

Le SQL

Le SQL, structured query language, est un langage de requête utilisé pour la manipulation de bases de données relationnelles. Il a été créé au milieu des années 70 par IBM. Le premier produit SQL, Oracle a été mis sur le marché en 1979. Oracle est l’un des principaux acteurs du marché des technologies de bases de données relationnelles. Depuis l’approbation en 1986 de l’implémentation IBM, le SQL a été défini comme le langage standard de communication des bases de données relationnelles.

Image15.2,auteur  Luc Frébourg

 

CREATE TABLE article(
refart varchar(4) PRIMARY KEY,
designation varchar(30),
prix double,
codetva int,
categorie varchar(10),
qtstock int
) ENGINE = InnoDB;


INSERT INTO client(nocli, nomcli) VALUES(37, ’Dornet’);


SELECT nocli, nomcli FROM client;

Le PHP

PHP est un langage libre de 1994. Exécuté coté serveur web (par exemple Apache2, Nginx), il peut générer du code HTML. il permet de créer des pages web dynamiques.

Image16,auteur  Luc Frébourg

On peut par exemple récupérer des données d’un formulaire HTML avec PHP.

Image17, auteur Luc Frébourg

Le HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>mon titre</title>
</head>
<body>

<form method="post" id="frmConnection" action="recuperation.php">
    <label for="email"> Votre email:</label>
    <input type="email" name="txtEmail" id="txtEmail" autofocus />
    </br>
    <label for=" txtPass "> Mot de passe :</label>
    <input type="password" name="txtPass" required />
    <input type="submit" name="cmd" id="cmd" value=" envoie " />
</form>

</body>
</html>

Le PHP
On récupère les valeurs et on les insère dans une base de données Mysql.

<?php session_start();

if (isset($_POST[‘txtEmail’])) {
    echo $_POST[‘txtEmail’];
}
$dsn='mysql:dbname=testdb;host=127.0.0.1';

$dbh=new PDO($dsn,"user","password"); 

$sql="INSERT INTO client(nocli, nomcli) VALUES(37, ’Dornet’);";
$dbh->exec($sql);

Le JavaScript

Crée en 1995, JavaScript sert à contrôler les données saisies dans des formulaires,modifier le HTML et le CSS et bien d’autres choses. Le JS est exécuté coté client par le navigateur. Le code est donc accessible par l’utilisateur dans son ensemble. Il est toutefois possible d’écrire du JS coté serveur. JS ne fonctionne pas de la même façon que Java.

Image18, auteur Luc Frébourg

Image19, auteur Luc Frébourg

<script>
alert(‘coucou’) ;
</script>

On utilise la commande prompt pour la saisie et alert pour l’affichage avec l’utilisateur

let maVar= prompt(‘Entrez une valeur) ;
alert(maVar);

On utilise principalement une bibliothèque JavaScript nommé JQuery pour faciliter le développement.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function(){ 
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});

</script>