Mémo STIC 1
Cette page est un résumé des différents cours de STIC I.
Elle est principalement faite pour m’aider à structurer ma pensée et à avoir une page regroupant toutes les informations qui pourraient m’être utiles.
Elle est réalisée à partir des données du cours, des exemples sur les pages wiki, de contenus trouvés sur internet et des discussions avec l’IA.
N’hésitez pas à modifier son contenu si vous voyez des termes erronés ou peu précis, ou tout simplement à le compléter avec des infos qui ne figurent pas sur cette page.
HTML, CSS et JAVA SCRIPT
HTML représente la structure du document, son corps.
CSS permet de traiter son apparence
JavaScript permet de traiter les actions, les « comportements ».
Pour faire des commentaires
Les commentaires permettent de donner des explications sur le code. Tout ce qui est entre les balises de commentaires est ignoré par l’ordinateur et pas affiché sur la page web.
Les éléments de commentaires sont différents selon html, css ou js.
| html | css | js |
| < !- - qu’on ne souhaite pas faire apparaitre - - > | /* commentaire qu’on souhaite ne pas faire apparaitre */ | /* commentaire sur un paragraphe ou une fonction qu’on souhaite ne pas faire apparaitre */
|
HTML :
Structure
La page html a une structure bien spécifique, elle commence par des informations générales < ! DOCTYPE html > à inscrire tout en haut du document. C’est également dans cette partie que nous pourrons insérer les liens css des différentes librairies ainsi que le lien de notre page css.
Raccourcie clavier :
Raccourcie clavier pour créer rapidement et facilement cette section :
- Enregistrer une nouvelle page au format html.
- Dans la première ligne appuyer sur « ! » puis « entrer »
La mise en page s’affiche. Il suffit de changer la langue en fr si souhaité plutôt qu’en anglais.
La partie <title> correspond à ce qui va s’afficher dans les onglets lorsque votre page est ouverte.
Page :
Tout le reste du code s’écrit entre les balises <body> </body>
Pour une meilleure structure et faciliter la lecture du code, il est possible d’organiser sa page comme suit :
<body> <head> En tête </head> <nav> Menu </nav> <aside> Descriptif, résumé de la page </aside> <main> Contenu </main> <footer> Pied de page </footer> </body>
Mise en page :
Le code commence toujours par une balise ouvrante <…> et se termine par une balise fermante </….>
<p> permet de créer un paragraphe </p>
<h1> Gros titre </h1>
<h2> titre 2 </h2> etc…
<i> italique sans ref. sémantique </i>
<em> italique avec ref sémantique </em>
<b> gras sans ref. sémantique </b>
<strong> gras avec ref sémantique </strong>
<mark> surligne du texte</mark>
<ins> souligne un texte </ins>
<del> barre un texte </del>
Balises autofermante :
<br/> permet un saut de ligne
<hr/> permet de créer une ligne de séparation
<sup> et <sub> Permettent d’écrire des textes type fraction : le texte sup sera en haut. Le texte sub en bas.
Vous pouvez consulter ce site pour avoir une liste des différentes balises html [1]
Insérer des liens
L'attribut <a href> et <img src> permettent d'insérer des liens et des images.
<a href = « https…..lien du site » </a>
<img src = “https…..lien de l’image” alt =” information-description de l’image“ title= ”nom de l’image en survol avec la souris” />
alt : Permet de voir la description de l’image si le lien ne s’affiche pas. (mauvaise connexion ou lien cassé)
Il permet également de lire l’information de ce qui est écrit aux personnes aveugles.
Si vous souhaitez que le lien s’ouvre dans un nouvel onglet il suffit de rajouter l’indication :
target = "_blank” à la suite du lien.
<a href = « https….. target = "_blank” » </a>
Lien absolu :
Les chemins absolus représentent le lien depuis la base.
<a href =”https://etu.tecfa/mapage.html” >nom du lien</a>
<img src = “ /users/audrey/images/photo.png”>
Lien relatif :
Les chemins relatifs représentent une partie du lien.
<a href = “../nomdufichier.html”>titre du fichier</a>
<img src=”images/photo.png”>
→ dans un fichier, pour retourner en arrière on utilise “..” et “/” pour l’ouvrir.
Lien “bookmark” :
Ces liens permettent de faire des ancrages dans la page afin de permettre à l'utilisateur d'y revenir à n'importe quel moment.
- Inscrire à n’importe quel endroit qu’on souhaite cibler sur la page l’attribut “id" . exemple :
<h(1) id=”croco”> Les crocodiles </h1>
- Plus tard lorsqu'on souhaitera faire référence à ce passage et permettre au lecteur d’y accéder directement il suffira d’inscrire :
<a href = “croco” </a>.
Faire des listes et des tableaux
Faire une liste à puce
<ul> <li> mot </li> <li> mot </li> </ul>
Faire une liste ordonnée
<ol> <li> mot </li> <li> mot </li> </ol>
Faire des tableaux
<table> <tr> ligne du tableau </tr> <td> colonne du tableau </td> <th> cellule d’en-tête de la colonne en ligne.</th> </table>
Vous pouvez consulter ce site pour plus d'informations :
https://www.pierre-giraud.com/html-css-apprendre-coder-cours/tableau-table/
Créer des slides
<div class="slider"> <div class="slide">Slide 1</div> <div class="slide">Slide 2</div> </div>
Il est aussi possible d’utiliser la bibliothèque Reveal.js pour créer plus de transitions.
Créer des boutons et des formulaires
Créer des boutons :
<button> texte sur le bouton </button>
Utiliser le css pour styliser le bouton.
Les différents formulaires :
Forme de base :
<form>
<p>
<label> Prénom : </label>
<input type= “texte” name=”Prénom”/>
</p>
</form>
Formulaire à choix unique (radio) :
<p>Quel est votre âge ? </p> <input type="radio" name="my-radio" value="Moins de18 ans" /> Moins de18 ans<br/> <input type="radio" name="my-radio" value="Entre 19 et 40 ans"/>Entre 19 et 40 ans<br/> <input type="radio" name="my-radio" value="Entre 41 et 60 ans"/> Entre 41 et 60 ans <br/> <input type="radio" name="my-radio" value="Plus de 60 ans"/> Plus de 60 ans<br />
Formulaire à choix multiples (checkbox) :
<p>Sur quel.s continent.s êtes vous allé.e ? </p> <input type="checkbox" name="Afrique" value="Afrique"/> Afrique <br/> <input type="checkbox" name="Océanie" value="Océanie"/> Océanie <br/> <input type="checkbox" name="Europe" value="Europe"/> Europe <br/> <input type="checkbox" name="Amérique" value="Amérique"/> Amérique <br/> <input type="checkbox" name="Asie" value="Asie"/> Asie <br/>
Bouton “Envoyer le formulaire” :
<input type="submit" value="Envoyer"/>
Vous pouvez utiliser ce site pour plus d'informations : https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061492-creez-des-formulaires
Et pour s'entraîner ?
https://htmlonline.org/fr/ est un éditeur en ligne de code.
Il permet de s’entraîner ou visionner ce que l’on souhaite coder.
Les vidéos
Cette section reprend des parties du code réalisé pour l’exercice 4 de stic.
Insérer une vidéo
<div class="video"> <video id="movie1" controls="controls" preload="metadata" width="832" height="464"> <source src="https://tecfaetu.unige.ch/etu-maltt/freya/avogadr5/assets/video%20g%C3%A9othermie.mp4"/> <track kind="subtitles" label="Soustitre en FR" src="soustitre.vtt" srclang="fr" default/> </video> </div>
Insérer des sous-titres
Pour insérer des sous-titres à une vidéo il faut l’annoncer dans html et créer un fichier .vtt qu’on joindra dans la balise.
<track kind="subtitles" label="Soustitre en FR" src="soustitre.vtt" srclang="fr" default/>
Le fichier .vtt contient les phrases qu’on souhaite voir afficher à la seconde prêt. Il est possible d’utiliser des logiciels pour faciliter le processus (https://subtitle-editor.org/) .
- !- Ne pas oublier de déposer le fichier sur le serveur.
WEBVTT
1
00:00:01.340 --> 00:00:02.090
Sous nos pieds,
2
00:00:02.710 --> 00:00:04.950
la Terre dégage une chaleur constante.
3
00:00:05.800 --> 00:00:09.410
Et si cette chaleur pouvait chauffer nos maisons en continue…
Ancrage
Les ancrages sont des liens qui permettent à l’utilisateur d’atteindre directement la partie souhaitée dans la vidéo.
Dans html :
<a href="#movie1" onclick="pointTo(49)">Les différents types de géothermie</a> <a href="#movie1" onclick="pointTo(184)">La géothermie conventionnelle</a> <a href="#movie1" onclick="pointTo(215)">L'egs, Systèmes Géothermiques Améliorés</a> <a href="#movie1" onclick="pointTo(253)">L'ags, Systèmes Géothermiques Avancés</a> <a href="#movie1" onclick="pointTo(312)">Les projets pilotes en Suisse</a>
« Point to(49) » correspond à la 49ème seconde de la vidéo.
Lorsque l’utilisateur cliquera sur « les différents types de géothermie », la vidéo affichera le passage.
*Les liens sont stylisables avec css.
Dans JS :
1. Identifier votre vidéo
var video = document.getElementById("movie1");
2. Créer une fonction de pointage
function pointTo(seconds) {
//Déplacer la lecture au moment souhaité
video.currentTime = seconds;
//Faire démarrer la lecture
video.play(); }
Questions
Il est possible d’insérer des questions dans la vidéo afin d’interagir avec l’utilisateur.
Dans JS :
1. Identifier la vidéo dans le DOM
var movie1 = document.getElementById("movie1");
2. Choisir le temps souhaité pour l’affichage de la question
movie1.ontimeupdate = function () {
var currentTime = Math.floor(movie1.currentTime);
if(currentTime == 290) {
3. Mettre le film en pause et poser la question
movie1.pause();
var r = prompt("L'AGS provoque-t-il des risques sismiques ?");
4. Contrôler la réponse et agir
if(r.toLowerCase() == "non") {
movie1.currentTime = 291; //Ajouter une seconde sinon la question va s'afficher à nouveau;
movie1.play();
} else {
movie1.currentTime = 253; //Remettre la vidéo sur la partie explicative;
movie1.play();
}
}
}
Si la réponse de l’utilisateur est bonne la vidéo se poursuit. Si elle est fausse la vidéo retourne au passage explicatif.
Les librairies
Une librairie est un site dans lequel du code est déjà écrit.
Emplacement et insertion des liens
Emplacement
- Mettre le CSS en haut, dans <head>
- Le JavaScript doit s’exécuter lorsque le HTML est déjà chargé. Il est donc important de le placer en toute fin de page.
Mettre le javascript en bas du <body>
Insertion
Via CDN :
On colle les liens URL proposés sur le site.
<link rel="stylesheet" href="...">
<script src="https://chemin/vers/la/librairie.js"></script>
En local
On télécharge la librairie qu’on place dans notre dossier de travail puis on utilise le chemin relatif.
- !- Ne pas oublier de charger la librairie sur le serveur.
<link rel="stylesheet" href="style.css">
<script src="js/jquery.min.js"></script>
Exemples de librairies
| CSS | JS |
| Booststrap
Pour faire du responsive Pour faire des animations Pour faire des sites dynamiques Pour styliser les boutons |
JqueryUI
Pour des fonctions interactives Pour des animations lors du scroll Pour des cartes interactives Pour intégrer du 3D Pour des infos bulles dynamiques Pour des carousel Pour des diaporama interactifs |
Java Script - Éléments computationnels
Drag & drop
Avec la bibliothèque JQuery
Insérer la librairie JQuery soit en local soit en CDN comme expliqué précédemment.
https://jqueryui.com/draggable/
Exemple : Permettre le déplacement de ces objets dans les bonnes cases.
Lien vers l'exercice 5 de stic : https://tecfaetu.unige.ch/etu-maltt/freya/avogadr5/stic-1/ex5/lecture.html
Dans html
1. Définir les éléments déplaçables.
<div class="item-son">
<div class="item on">
<img src="images/on/lion.png"width="50" height="60" alt="lion" onclick="prononcer(this.alt)">
</div>
<div class="item on">
<img src="images/on/pantalon.png"width="50" height="60" alt="pantalon" onclick ="prononcer(this.alt)">
</div>
<div class ="item ou">
<img src="images/ou/courgette.png" width="50" height="60" alt="courgette" onclick ="prononcer(this.alt)">
</div>
<div class ="item ou">
<img src="../ex5/images/ou/ours.png" width="50" height="60" alt="ours" onclick ="prononcer(this.alt)">
</div>
</div>
2. Définir les lieux de dépose
<div class="Son-container"> <div class="Son on"><img src="../ex5/images/AstroSon/on.png" width="55" height="45" alt="on" onclick ="prononcer(this.alt)"></div> <div class="Son ou"><img src="../ex5/images/AstroSon/ou.png" width="55" height="45"alt="ou" onclick ="prononcer(this.alt)"></div> <div class="Son ch"><img src="../ex5/images/AstroSon/ch.png" width="55"height="45"alt="che" onclick ="prononcer(this.alt)"></div> <div class="Son oi"><img src="../ex5/images/AstroSon/oi.png" width="55" height="45"alt="wa" lang="en" onclick ="prononcer(this.alt)"></div> </div>
*l’attribut « on click = prononcer (this.alt) » permet au système de prononcer à haute voix l’élément sélectionner. Ce n’est pas obligatoire dans le fonctionnement du drag & drop.
Dans JS
1. Choisir les éléments qui seront déplaçables.
// choix des images déplaçables.
$(".item").draggable({
revert: "invalid",
cursor: "move"
});
2.Choisir les éléments qui seront déposables
//choix des images déposables + degré de tolérance.
$(".Son.on").droppable({
accept: ".item.on",
drop : dropped,
tolerance : "fit"
});
$(".Son.ou").droppable({
accept: ".item.ou",
drop : dropped,
tolerance : "fit"
});
Le symbole $ renvoie à l'élément codé dans la librairie JQuery et évite de coder des lignes permettant d'effectuer le drag&drop.
Elément aléatoire - à venir-
Condition (if/else) - à venir -
JAVA SCRIPT - à venir -
CSS - à venir -
SVG - à venir -
Références :
Html :
https://github.com/dinanathsj29/html5-essentials-tutorial/blob/master/README.md
https://facemweb.com/blog/creation-site/liste-balises-html/
https://www.pierre-giraud.com/html-css-apprendre-coder-cours/tableau-table/