Devoir 7: Apprécier le loading

Consignes

SVP lisez-les bien. Votre carrière de pilote des vols DIRO-AIR 1005 va très bien jusqu'à maintenant, il n'y a pas eu de crash depuis beaucoup de temps. (creds pour le devoir: Lucas Hornung)

Où écrire le devoir?

Le but du devoir est de créer 2 SVG qui serviraient hypothétiquement pour indiquer à des utilisateurs que du contenu est en train d'être chargé (les icônes loading...)

Utilisez le code de Code pour la remise du devoir 7 à la section ci-dessus pour le fichier intitulé devoir7.html. Notez que seul le fichier devoir7.html sera corrigé. (vous pouvez utiliser toujours un éditeur de texte à part et les coller après sur nano, ou vous pouvez suivre les consignes ici pour utiliser un autre éditeur de texte sur lequel il est plus facile de programmer)
Le devoir est a remettre le MARDI (!!!!) (!PAS VENDREDI) prochain, 15 mars, à minuit. Une fois que vous aurez fini, le fichier doit se retrouver dans le même dossier que où se trouvent vos devoir 1, devoir 2, etc. Il devrait donc être accessible (pas d'erreur forbidden ni not found) aux adresses:
```
xxxxxxxxxx
https://www-ens.iro.umontreal.ca/~votreusername/ift1005/tp0/devoir7.html
```
(ce qui implique que vous devez vous connecter sur arcade pour le deposer)
Notez que l'adresse complete de cet emplacement sur ssh avec la commande pwd est
```
xxxxxxxxxx
/home/www-ens/votreusername/public_html/ift1005/tp0/
```
De plus, vous devez vous assurer que vos fichiers ift1005 et tp0 on les permissions drwxr-xr-x et que votre devoir5.css a bien la permission -rw-r--r—, sans quoi nous ne pourrons récuperer votre devoir.
Un tutoriel sur ceci est disponible ici

Code pour la remise du devoir 7

FAITES VOTRE DEVOIR SUR FIREFOX OU CHROME FAITES VOTRE DEVOIR SUR FIREFOX OU CHROME FAITES VOTRE DEVOIR SUR FIREFOX OU CHROME FAITES VOTRE DEVOIR SUR FIREFOX OU CHROME FAITES VOTRE DEVOIR SUR FIREFOX OU CHROME FAITES VOTRE DEVOIR SUR FIREFOX OU CHROME FAITES VOTRE DEVOIR SUR FIREFOX OU CHROME FAITES VOTRE DEVOIR SUR FIREFOX OU CHROME

Creer le fichier devoir7.html qui contiendra le code en dessous.

Vous pouvez utiliser ce validateur pour valider votre code: https://validator.w3.org/#validate_by_input

devoir7.html -> a copier et coller tel quel.


xxxxxxxxxx
<!DOCTYPE html>
<html lang="fr">

<head>
    <title>Devoir 7</title>
    <meta charset="UTF-8">

</head>

<body>
  <!-- votre svg 1 ici  (notez que vous devez remplacer hauteurIci, largeurIci, mettre des attributs a animateTransform et changer le path, etc.) Vous pouvez utiliser des path ou toute autre element SVG vous permettant de faire la forme. 
    <svg width="largeurIci" height="hauteurIci"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <path ... />
      <animateTransform .../>
    </svg> -->
  
  <!-- votre svg 2 ici (notez que vous devez remplacer hauteurIci, largeurIci, mettre des attributs a animateTransform et changer le path, etc.) Vous pouvez utiliser des path ou toute autre element SVG vous permettant de faire la forme. 
    <svg width="largeurIci" height="hauteurIci"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <path ... />
      <animateTransform .../>
    </svg> -->
</body>

</html>

AVERTISSEMENT: COMPATIBILITE DU DEVOIR:

(par "faire le devoir", je veux dire que vous le codez sur votre editeur de texte et quand vous ouvrez le HTML pour voir ça a l'air de quoi, ouvrez le sur CHROME ou FIREFOX svp)

^ sinon vous ne serez pas capables de voir toutes les animations. Vous avez ete avertis!

Note pour les gens créatifs qui veulent rajouter du style au devoir:

Notez que les styles de votre devoir qu'on évalue ne peuvent être que contenus dans vos SVG. Ils devraient exister indépendemment du HTML. Le correcteur (qui est Santiago et pas Laura) devrait être capable de copier coller votre <svg></svg> ailleurs que le fichier HTML et les styles du SVG ne devraient pas changer. Si vous voulez rajouter d'autres styles pour centrer vos SVG après avoir fini les deux svg qui contiennent leurs propres styles, rajoutez les dans la balise style dans le head, mais ces styles ne devraient pas affecter l'apparence NI LES ANIMATIONS(!!!!) des SVG individuels.

Si vous ne comprenez pas ce que ceci veut dire, cassez-vous pas la tête: ne rajoutez pas de style css sur le html et faites seulement des styles pour vos SVG tels qu'indiqués dans le site de référence donné dans cet énoncé.

Instructions

(encore une fois, creds à Lucas)

Vous devrez reproduire deux des symboles de chargement de votre choix que l’on retrouve sur le site suivant : https://loading.io/css/ . Par reproduire, on veut dire que vous même devrez créer les formes à partir de rien, les placer, les animer. Ceci ne veut pas dire copier le code donné dans loading.io.

Exemple de ce qu'on veut dire par symbole de chargement:

Vous devez mettre vos 2 SVG dans le code donné dans code pour la remise du devoir 7. Je vous ai mis 2 exemples de SVG mais ils ne contiennent pas tout ce quil faut pour qu'un SVG et son animation marchent, à vous remplir le reste.

IMPORTANT: Vous devez les faire entièrement en SVG, incluant les animations. Vous ne pouvez pas utiliser de CSS pour les animations.

Ressources utiles : - https://css-tricks.com/using-svg/ - https://css-tricks.com/guide-svg-animations-smil/

Critères de correction

La correction se fera avec les critères suivants en tête :

Les consignes ont été respectées (2 symboles en SVG pur).
Le code est bien formaté.
Les sélecteurs, balises, nom, etc. utilisés sont appropriés
Le résultat final est fidèle au modèle et est visuellement plaisant.
L’animation est fonctionnelle
Le code doit être une production originale. Si on vous surprend en train de copier le code du load.io au lieu de créer les formes vous même, cela entraînera la note zéro.