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 existants
  • Connaitre le fonctionnement des sites web
  • Zéro papier

 

Fonctionnement d’un site Web

 

Image1,auteur Luc Frébourg

  • page web
    un document qui peut être affiché par un navigateur web (tel que Mozilla Firefox, Google Chrome, Microsoft Internet Explorer ou Edge ou encore Safari). Un document sera chargé avec ses ressources liées dont les images, les fichiers JavaScript, les feuilles de styles, les fichiers de fontes, les vidéos, etc.
  • site web
    un ensemble de pages web regroupées entre elles de différentes façons.
  • serveur web
    un ordinateur qui héberge un site web, souvent loué à une entreprise (OVH, AWS, Ionos etc).
  • moteur de recherche
    un site web qui aide à trouver des pages web (Google, Bing, Yahoo, DuckDuckGo, Qwant, etc).
  • nom de domaine
    Une adresse, humainement compréhensibles (gouv.fr).
    Tout ordinateur relié à Internet peut être contacté via une adresse IP publique, par exemple 173.194.121.32 ou 2001:0db8:85a3:0042:1000:8a2e:0370:7334. L’adresse IP peut également être modifiée au cours du temps. Le nom de domaine (comme education.gouv.fr) permet de faciliter la mémorisation et la pérennité de l’accès à la ressource.
    On peut enregistrer un nom de domaine auprès d’un bureau d’enregistrement (Gandi, Google  etc).
  • URL
    Une adresse d’une ressource donnée, unique sur le Web (peut être un sous ensemble d’un nom de domaine, education.gouv.fr).
  • HTTP
    un protocole de transport permettant de trouver les documents en fonction de leur URL.
  • HTTPS
    version chiffrée du protocole HTTP

De MDN Web docs, https://developer.mozilla.org/fr/

 

Le 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>

Un document de cette forme sera valide mais préférer la première forme

<!DOCTYPE html>
<title>ma page</title>

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>

La balise utilisée pour créer des paragraphes. Ces paragraphes sont généralement (automatiquement) séparés par des sauts de ligne.

<p>mon paragraphe</p>

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 n’ont pas de signification particulière, elles permettent simplement de séparer des sections d’un document. La plupart du temps, ces balises sont utilisées pour la mise en forme et le script.

<div> </div>
<span> </span>

Ces balises sont utilisées pour créer des listes. <ul> permet de définir une liste non-ordonnée et <ol> de définir une liste ordonnée.

<ul>
  <li>Café</li>
  <li>Thé</li>
  <li>Lait</li>
</ul>

<ol>
  <li>Café</li>
  <li>Thé</li>
  <li>Lait</li>
</ol>

Cette balise permet d’intégrer une image dans un document HTML.

<img src="url/vers/mon/image.png" alt="Une description">

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>

Les balises de squelette d’une page

Certaines balises permettent d’organiser le code HTML.

Remarque : le navigateur ne fait aucune mise en page spécifique sur ces balises. Il faudra donc associer du CSS (voir plus loin dans le document).


 Image2,auteur Jandi soon, le plan d’une page avec html 5,

 

Mise en pratique : création de pages web

Création d’un répertoire site internet

  • Créer un dossier « site internet » dans l’espace de votre choix, sur le bureau par exemple.

 

Création d’un fichier keynes.html

  • Enregistrer ce texte dans un traitement de texte (Word, Writer).
John Maynard Keynes , né le 5 juin 1883 à Cambridge et mort le 21 avril 1946 dans sa ferme de Tilton à Firle, est un économiste, haut fonctionnaire et essayiste britannique. Sa notoriété est mondiale. Il est le fondateur de la macroéconomie keynésienneNote 1. Le keynésianisme, la nouvelle économie keynésienne, le néokeynésianisme ou le post-keynésianisme sont issus de son œuvre. Considéré comme l'un des plus influents théoriciens de l'économie du xxe siècle1, il fut, en tant que conseiller officiel ou officieux de nombreux hommes politiques, l'un des acteurs principaux des accords de Bretton Woods, après la Seconde Guerre mondiale.

Wikipédia, John_Maynard_Keynes, CC, https://fr.wikipedia.org/wiki/John_Maynard_Keynes

  • Ajouter sa photo https://upload.wikimedia.org/wikipedia/commons/0/04/Keynes_1933.jpg?uselang=fr
  • Ajouter un titre avec une couleur.
  • Enregistrer le fichier au format HTML sous le nom keynes.html.
  • Ouvrir le fichier grâce à un éditeur de texte pour observer le code généré (SublimeText , Nodepad++, Atom, Brackets, Visual Studio par exemple ).

 

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. 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


 Image5,auteur Casimir Balthazar (1811-1875),

  • Afficher la page 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 de celle-ci.

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 vue 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>

 

  • Comparer le rendu entre Internet explorer et Chrome.
  • Définir le titre du livre en h1.
  • Permettre un retour à la ligne entre les deux paragraphes.

 

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 : https://www.economie.gouv.fr/files/files/directions_services/igpde-editions-publications/dor_et_dargent_230x316.jpg
  • Modifier livres.html pour lui permettre de pointer sur OretArgent.html.

 

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">

Pour les déclarations dans l’en-tête d’un fichier HTML:

<head>
<style type="text/css">
sélecteur {
  propriété: valeur;
}
</style>
</head>

Directement dans une balise d’un fichier HTML:

<balise style="text-align:center; color:red"> ... </balise>

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>

Soit on utilise des identifiants

#monBloc{
color : yellow;
}

<div id="monBloc"> mon code </div>

Il existe d’autres sélecteurs.

Mise en forme du texte

Attribut sur le texte. Selon les navigateurs, l’affichage des polices de caractères n’est pas la même.

body {
  color: red;

  font-family:"times new roman", times, serif;
  font-size : small;
  font-weight:bold;
  font-style: italic;

  text-align: center;
  text-decoration: underline ;
  
  line-height : 200%

}

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 vue 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
  • Définir une classe nommée livresimage pour la balise img.
  • Ajouter le code suivant à livres.css
.livresimage{
  max-width: 30%;
}
  • Tester dans un navigateur livres.html
  • Définir une div  avec un identifiant livresdiv autour du texte de livres.html
  • Ajouter des marges internes grâce à une classe CSS nommée livrespad sur la div livresdiv
  • Modifier la police du texte de livres.html en utilisant le code suivant sur la div livresdiv
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.

 

  • 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 .


Image9,auteur Luc Frébourg

 

Bonus

  • Héberger ses fichiers sur le serveur proposé par le formateur :
    keynes.html
    livres.html
    JohnLawdeLauriston.jpg
    HistoryMoneyAncientTimestoPresent.html 
    OretArgent.html
    livres.css

 

Mise en pratique : 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.
  • Cliquer sur le bouton avancé en mode édition puis sur HTML.

<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); »

 

  • Ajouter une image à la section 2 puis grâce à la propriété style dans img, ajouter un coin arrondi.
border-radius: 10px;

  • Ajouter une couleur de fond au titre de cette section.
background-color: pink;

 

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

 

 

Pour aller plus loin

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.

 


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.

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>