Fonctionnement d’un site Web

 

  • 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 adresses, 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

(en partie de MDN Web docs)

 

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

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. Le navigateur ne fait aucune mise en page spécifique sur ces balises. Il faudra donc associer du CSS.
http://iwebtechexpert.com/blog/wp-content/uploads/2013/04/HTML5_structure.png

 

Modification d’une page Web

 

Partie 1

  • Installer un éditeur de texte (SublimeText , Nodepad++, Atom, Brackets, Visual Studio par exemple ).

  • Enregistrer le code suivant dans un fichier livres.html
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8"/>
    <title>ma page</title>
</head>
<body>
  <h1>Quelques livres d'Isaac Asimov</h1>



<img src="Isaac.Asimov01.jpg" alt="Asimov">
<ul>
  <li><a href="lesrobots.html">Les robots</a></li>
  <li><a href="lesrobots.html">Fondation</a></li>
  <li><a href="lesrobots.html">Tyrann</a></li>
</ul>



</body>
</html>
  • Enregistrer l’image suivante Isaac.Asimov01.jpg dans le même répertoire.

  • Afficher la page.
  • Tester les liens.
  • Modifier le titre de la page.

Partie 2

  • Enregistrer le code suivant dans un fichier lesrobots.html.
<!DOCTYPE html> 
<html>

<body>
  Les robots



<img src="https://images.noosfere.org/couv/j/jl0453-1982.jpg" alt="robots">
Les Robots est un recueil de neuf nouvelles de science-fiction écrites par Isaac Asimov, publié la première fois par Gnome Press en 1950 et traduit en 1967.


Susan Calvin est robopsychologue à l'United States Robots, Inc. Née en 1982, elle a aujourd'hui 75 ans. Ce livre relate ses souvenirs sur l'évolution du robot dans l'histoire humaine, depuis Robbie qui, en 1996, fut vendu comme bonne d'enfants jusqu'à Byerley qui devient président de la Fédération mondiale terrestre en 2044. A travers ces récits, on voit comment le robot, d'abord esclave soumis à l'homme, parvient peu à peu à être son égal, avant de devenir son maître. Les souvenirs du Dr Calvin forment un livre au charme désuet qui fait revivre l'aube du XXIème siècle, époque où l'homme existait encore indépendamment de son compagnon de métal, le robot. 

</body>
</html>
  • Comparer le rendu entre Internet explorer et Chrome.
  • Définir Les robots en titre h1.
  • Permettre un retour à la ligne entre l’image et le texte.
  • Enregistrer le code suivant dans un fichier fondation.html.
<!DOCTYPE html> 
<html>

<body>
  Fondation



<img src="https://images.noosfere.org/couv/j/jl0453-1982.jpg" alt="robots">Fondation (titre original : Foundation) est un <a href="https: fr.wikipedia.org="" wiki="" roman_(litt%c3%a9rature)" title="Roman (littérature)">roman de <a href="https: fr.wikipedia.org="" wiki="" science-fiction" title="Science-fiction">science-fiction rédigé par <a href="https: fr.wikipedia.org="" wiki="" isaac_asimov" title="Isaac Asimov">Isaac Asimov et composé de cinq <a href="https: fr.wikipedia.org="" wiki="" nouvelle" title="Nouvelle">nouvelles, dont quatre publiées individuellement entre <a href="https: fr.wikipedia.org="" wiki="" 1942_en_litt%c3%a9rature" title="1942 en littérature">1942 et <a href="https: fr.wikipedia.org="" wiki="" 1944_en_litt%c3%a9rature" title="1944 en littérature">1944 et à laquelle une cinquième fut ajoutée pour former ce livre publié pour la première fois en <a href="https: fr.wikipedia.org="" wiki="" 1951_en_litt%c3%a9rature" title="1951 en littérature">1951. C'est le premier volet du <a href="https: fr.wikipedia.org="" wiki="" cycle_de_fondation" title="Cycle de Fondation">Cycle de Fondation</a href="https:>. Bien qu’il constitue aujourd’hui le troisième épisode chronologique de ce cycle, il est le premier à avoir été écrit et peut donc être lu indépendamment de <a href="https: fr.wikipedia.org="" wiki="" pr%c3%a9lude_%c3%a0_fondation" title="Prélude à Fondation">Prélude à Fondation</a href="https:> et <a href="https: fr.wikipedia.org="" wiki="" l%27aube_de_fondation" title="L'Aube de Fondation">L'Aube de Fondation</a href="https:>.</a href="https:></a href="https:></a href="https:></a href="https:></a href="https:></a href="https:></a href="https:>

<br><br>
En ce début de treizième millénaire, l'Empire n'a jamais été aussi puissant, aussi étendu à travers toute la Galaxie. C'est dans sa capitale, Trantor, que l'éminent savant Hari Seldon invente la psychohistoire, une science nouvelle permettant de prédire l'avenir. Grâce à elle, Seldon prévoit l'effondrement de l'Empire d'ici cinq siècles, suivi d'une ère de ténèbres de trente mille ans. Réduire cette période à mille ans est peut-être possible, à condition de mener à terme son projet : la Fondation, chargée de rassembler toutes les connaissances humaines. Une entreprise visionnaire qui rencontre de nombreux et puissants détracteurs…

Récompensé par le prix Hugo de la « meilleure série de science-fiction de tous les temps », Le Cycle de Fondation est l’œuvre socle de la SF moderne, celle que tous les amateurs du genre ont lue ou liront un jour.

</body>
  • Observer la différence du code et de l’affichage.
  • Modifier l’image grâce à une déjà hébergée sur un site web.
  • Permettre à livres.html de pointer sur le bon fichier.

 

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

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

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

 

 

Modification d’un parcours Eléa

Pizza

Liste des ingrédients

  • 500 g de farine (ou un mélange de 250 g de farine normale + 250 g de farine à pain)
  • 1 c. à café de sel
  • 1 c. à soupe d’huile d’olive
  • 2 sachets de levure de boulanger déshydratée (soit environ 10 g)
  • Eau (environ 250 ml)
  • Oignon
  • Ail
  • Coulis de tomate
  • Herbes de Provence
  • Tomates cerises
  • Mozzarella
  • Gruyère râpé
  • Chiffonnade de jambon italien
  • Roquette

Étapes de la recette

  1. Préparation de la pâte à la main ou à la machine à pain. Les proportions vous permettrons de faire 3 pizzas moyennes ou 2 grandes
  2. Mélangez la farine, le sel, la levure, ajoutez l’eau (légèrement tiède) et l’ huile, pétrissez jusqu’à obtention d’une pâte bien homogène
  3. Couvrez et laissez lever 1 heure
  4. Chassez l’air de la pâte, divisez la pâte en 2 ou 3 boules et étalez-la sur le plan de travail (si la pâte se rétracte, évitez de fariner votre plan de travail, elle va accrocher et s’étaler plus facilement).
  5. Disposez le cercle de pâte sur une plaque avec une feuille de papier cuisson
  6. Préparation de la sauce à pizza : faites revenir l’oignon et l’ail émincés dans un peu d’huile d’olive, ajoutez le coulis de tomate, les herbes de Provence (thym, romarin, ou origan) et laissez mijoter pendant 8_10 minutes à feu doux.
  7. Répartissez un peu de sauce tomate sur la pâte à pizza
  8. Répartissez la garniture de façon homogène (tomates coupées, mozzarella, jambon, etc…)
  9. Enfournez dans le bas du four 10 minutes à 220°C, four bien chaud
  10. Servez avec de la roquette… ça pique un peu, c’est excellent 🙂

La page d’origine

https://www.hervecuisine.com/recette/recette-de-pizzas-facile/

 

————————————————————————————————————————————————————————————-

Reproduire la page sur Elea, https://communaute.elea.ac-versailles.fr, seul le CSS dans les balises fonctionne.

 

Modification avancée de pages Web

Partie 1

  • Créer un fichier CSS et l’importer dans livres.html
  • Modifier la couleur des titres h1 pour vérifier la bonne importation du fichier CSS
  • Réduire et mettre des marges à l’image de livres.html
  • Définir une div autour du texte de robots.html
  • Ajouter des marges internes grâce à une classe sur cette div
  • Modifier la police du texte de robots.html en utilisant un identifiant

Note : le CSS n’est pas toujours actualisé, il faut rafraîchir la page en vidant le cache du navigateur (ctrl+f5) et parfois insister…

Partie 2

  • Inspecter son code dans le navigateur

Note : dans ce mode, le cache peut être vider à chaque rafraîchissement.

  • Modifier la couleur du texte directement grâce au navigateur.
  • Installer Filezilla, logiciel de transfert de fichier.
  • Héberger ses pages sur le serveur proposé par le formateur grâce à Filezilla.

 

 

Le développement Web

 

La gestion des données

On stock les données des applications dans des bases de données. La plupart sont relationnelles. Les SGBD relationnelles  sont apparus dans les années 70. Une base de données relationnelle est une collection de données mises en relation dans des tables étant un ensemble de lignes et de colonnes. Les bases de données non relationnelles ou NoSQL prennent de l’essor avec le Big Data.

Le Big Data est un ensemble de données trop volumineux pour les capacités d’analyse humaine et la plupart des systèmes de gestion de données classiques.

Les Data Center sont composés de milliers de serveurs en rack. Les applications sont virtualisées pour une facilité de maintenance et un découpage des ressources.

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

Un exemple de Data center gouvernemental
https://nsa.gov1.info/utah-data-center/
https://fr.wikipedia.org/wiki/Utah_Data_Center

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.

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

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.

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

 

Pour aller plus loin

Site Web

  • Choisir un hébergeur (AlwaysData est gratuit) et déployer ses fichiers grâce à un logiciel comme Filezilla 
  • Sans valider, choisir un nom de domaine sur  Gandi
  • Comprendre la notion de DNS

JavaScript

  • Afficher bonjour grâce à alert de JavaScript dans une page HTML.
  • Sortir le code JS dans une page externe et exécuter le script sur la page HTML.
    <script src="monscript.js"></script>
  • Permettre la saisie du nom et du prénom grâce à prompt et afficher une phrase en console  grâce à console.log contenant les deux.
  • Réaliser un formulaire dans une page formulaire.html qui contient un nom et un prénom en  input text.
  • Récupérer le nom et le prénom du formulaire en cliquant sur un bouton grâce à la fonction val() de JQuery. Ne pas oublier d’inclure l’importation de la bibliothèque de JQuery.

PHP

  • Installer Wamp pour pouvoir exécuter des pages PHP en local ou déployer celles-ci sur votre serveur AlwaysData.
  • Réaliser une page bonjour.php qui affiche bonjour grâce à la fonction echo de PHP.
  • Récupérer les informations du formulaire dans une page recuperation.php et les afficher en utilisant la méthode GET et ensuite la méthode POST.