Retour

Notes du cours

Dossier avec les bouts de codes testés en cours:

https://etudiants.le75.be/2024-2025/B2/Digital-myth/site-exemple-gr2.zip -> Zip du 12/11/24

Cours du 12/11/2024, groupe1

Planning important :

Présence:

Cours du 05/11/2024, groupe2

Présence:

Cours du 22/10/2024, groupe1

Présence:

https://www.fontsquirrel.com/tools/webfont-generator

Cours du 15/10/2024, groupe2

Présence:

Code :

Alternatif à la propriété font-stretch

transform: scale(1,1);

Réglage de la taille d’un objet ou d’une police sur une page web :

Il y a plusieurs moyen d’indiquer dans le code la taille d’un objet

Pixel (px) = au nombre de pixels utilisés pour afficher l’élément dans la page, il varie donc selon la résolution de l’écran.

Millimètres (mm) = taille en millimètres

Rem = se base sur une valeur de base indiquée dans le body, c’est à dire qu’estimons que notre font de base est de 10px, en indiquant 1rem sur un texte il aura alors une valeur de 10px, 2rem sera alors 20px car 2 x 10px

Il y a aussi le em, le em utilise le même principe que celui de rem, seule différence est qu’au lieu de mettre nous même une valeur de initiale, le code va utilisé la valeur initial de la page (qui devrait être de 16 px)

Pour des éléments esthétiques tel que mettre une ombre, chaque navigateur à ses préférences, il faudra donc indiquer dans le code les valeurs de l’ombre pour chaque navigateur.

Pour inséré une image, c’est très simple, Il faut ouvrir une balise img, dans laquelle nous allons indiquer le doc dans lequel se trouve l’image que nous recherchons. Ensuite y placer le nom de l’image. Nous pouvons alors dans notre css indiquer sa taille. Alt est un élément qui existe depuis très longtemps, elle consiste à mettre un texte ajouter par nous même qui sera dans la page web lu par la voix automatisé utilisé par les mal voyant pour lire la page.

Font Squirrel, Transformateur de document font. Pour utiliser une font, il faut tout d’abord utiliser les bon fichier, woff et woff2. Une fois ces fichier bien ranger, il faut indiquer au code le chemin à suivre pour arriver jusqu’à la font, « .. » nous sert à sortir d’un dossier tandis que « / » nous sert à entrer dans un dossier. ==>exemple: "../font"

Cours du 01/10/2024, groupe1

Présence :

Arthur : destruction pc : a dû le recoder lui-même

ArthurBis : parti au canada chez des potes( ça pète) qui lui laissent l'appart pour son date. Ses potes se sont mis à mettre de la musique gênante grâce à Alexa. Il lui dit de la fermer, mais ça marche pô

Lara : site web ([]très[] gros projet) Nettoyer le bureau ->: tout écraser le bon dossier avec un brouillon.

LaraBis :Casse son nouveau téléphone et le cache pendant une semaine. quand découvert punis + téléphone de mami qu'elle détestait mais à appris à aimé.

Dilara: ???

Virus

Roksana : ""

Inès : Amis spirituels, maison hanté Ouille safé peur. Le fantôme n'aime pas le rap et réduit le volume de la musique BIZAR ?

InèsBis : mauvaise manip : elle a tout effacé, ça tourne mal puis bien!!!! affiche radio tout vectorisé en un clique

Aella: nouveau tel (windowsphone) avec sécu parentale→ Tel bloqué impossible à débloquer.

Nouveau pc -> Même problème avec le pc sauf qu'elle est majeure impossible de ce connecter sur le compte Window pcq pas le même nom de famille que la daronne. 3, 4 heures pour réparer le brol avec un boug à distance. Contrôle parental à VIE !!

Elsa: concert avec copain (<3DISIZ<3) chanson []super[] triste🥹,en acapella, donc: filme avec insta la chanson et la video se remet en boucle : MAX DE BRUIT !!! -> les gens dans la salle : 🤨🤨

Limitation de temps, habituer au format préconçu. + intrusion technologique.

ElsaBis : en droit : aide à la réussite : vidéo conférence. Tous allumé la caméra : se fait emballé par son copain devant la caméra : Elsa a été la chercher en ligne pour la prévenir.

Juliette : premier Iphone cassé donc récup samsung papa, comprend pas tout du tel, alarme qui sonne super fort avec sonnerie chelou, ne se rend pas compte que c'est son propre tel> et n'a jamais su d'où ça venait

Elodie : ami qui avait une enceinte connectée, bug à chaque fois qu'il y avait une musique (interrompait une musique pour faire une blague) exemple: "pourquoi les plongeurs plongent-ils toujours en arrière, parce que sinon ils tombent dans le bateau" marrant> commande vocale qui a été faite? mode humour activé?

Lena: animal crossing 3ds réanitialisé puis plus de jeux.> . RECOMMENCER tout le jeux :( ACHETER une nouvelle cartouche. etc...)

Point de départ :

Le web n'est pas tout ce qui a sur internet.

On écrit le code → il est interprété par un NAVIGATEUR, c'est un outil qui peut être utilisé sans internet.

Il est composé de l'URL

Le navigateur N'EST PAS UN MOTEUR DE RECHERCHE !!!

Différence entre locale et Distant : Construction de notre site en LOCALE ensuite mise en ligne par serveur pour qu'il soit DISTANT.

L'hébergement = le serveur ce lequel est mis le site distant

nom de domaine = mot pour trouver via un moteur de recherche le serveur.

HTML: construction des base, STRUCTURE

CSS/style: maquillage

La structure n'est visible que si on lui a donné du style 🤙

Le HTML à du style déjà embarqué, un style basique pour que soit quand même visible.

Le CSS vient upgrade le style, faire pleins de conneries trop cool

meta: ce qui le nom, le définie ex. la balise paragraphe dit qu'elle est le paragraphe.

ex:

= paragraphe

< : Cheveron

Cours du 24/09/2024, groupe2

Présence

Nico = Faille site web

Deniz = Bloquée par les limitations de son pc

Xavier = Démonte sa PS4 plusieurs fois, sans faire attention avec le temps. Il a finit par l'abîmer

Loic = après s'être fait piraté son compte overwatch, il le récupère après que la personne qui l'a acheté a acheté des cosmétiques sur son compte.

Wiktor = Jouait à minecraft, en discutant avec un inconnu sur les réseaux, il donne accès à son compte pensant recevoir un cadeau dans le jeu. L'inconnu a finalement tenter de voler son compte et avait changer son pseudo.

Jonatan = Comme il avait des problèmes de connexion chez lui, il se met à fabriquer des périphériques en aluminium afin de tenter d'améliorer sa connexion.

Anna = En utilisant son pc, elle a retiré ses droits d'accès à ses disques dur et s'est débattue pour pouvoir récupérer ses droits.

Dossier partagé pour mettre les texte en format .docx -> https://nuage.leseptantecinq.be/s/9MTyFFgmxHHeXWW

Cours Web

On ouvre les pages web sur un navigateur.

Un navigateur est un outil qui permet d’ouvrir des pages web distante ou locale. Les codes de ces pages s’appelle un url.

C’est un outils car il interprète un langage. Dans notre cas html et css.

CSS est un code utilisé pour le style (l’esthétique)

HTML est un code pour la structure de la page.

Les codes fonctionne avec des balises, ces balises sont des repères dans le code afin que l’outil puisse reconnaître le sujet exemple :

___

indique un emplacement texte, un paragraphe.

est une ligne de code html indiquant à l'outil qu'il faut lire tout les caractères, notamment les apostrophes ou les accents.

L’indentation est un élément visuel permettant de voir la hiérarchie des lignes de code dans le document.

Exemple :

Hello word

l’indentation est ce décalage produit dans le document nous faisant comprendre que hello word se trouve dans le body. Pour le faire il suffit d’appuyer sur tabulation.

Pour l’outils, et indique déjà l’ouverture et la fermeture d’un élément entre autre ici le body. Tout les éléments compris entre ces commandes sera compris comme faisant partie de celle-ci sans être impacté par l’indentation.

Commandes

  1. Mettre une ligne de code "en commentaire" Mac = Cmd + Shift + /

Windows = Ctrl + K + C

Créer une indentation

Tab

Codes

HTML

______________

La grande histoire

La moyenne histoire

Mon histoire

CSS

__________________

body {

background: blue;

}

h1 {

color: red;

}

_____________

Séance 1: 17/09/24

C'est quoi le numérique !?

   * wiktor : Objet interface électrique
   * Loic: Tout ce qui est électronique envoie et reçoit de l'infos
   * Léna: Tout ce qui est sur un écran
   * Nico: Tout ce qui contient des données
   * Lou: rien à ajouter
   * Arthur: Pas toucher / tout ce que nos machines traduisent
   * Deniz: Tout ce qui a un écran
   * Lara: no lo sé
   * Xavier: transfert d'infos électroniquement
   * Godric: Tout ce qui touche au pixel
   * Anna: Technologie de communication éléctronique
   * Dilara: rien de plus
   * Inès: out ce qui touche aux écrans
   * Roksana: pareil qu'Inès
   * Chaimae: En lien avec le techno connecté et qui contient des ressources
   * Élodie: Objets technologiques et modernes
   * Juliette: Images et informations qu'on voit sur nos écrans.
   * Aella: Au dessus d'internet

Séance 2: 22.10

Présences

-Aëlla

Reset:

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

        margin: 0;

        padding: 0;

        border: 0;

        font-size: 100%;

        font: inherit;

        vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

        display: block;

}

body {

        line-height: 1;

}

ol, ul {

        list-style: none;

}

blockquote, q {

        quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

        content: '';

        content: none;

}

table {

        border-collapse: collapse;

        border-spacing: 0;

}

Séance 1: 05/10/24

ordre de passage :

- Lou

- Xavier

- Wiktor

-Deniz