⌨ Digital Myth

Contexte

Durant ce premier quadrimestre nous allons essayer d'interroger des notions, des pratiques ou des objets numériques. Lorsque nous parlons de numérique, de quoi parlons-nous ? Si nous nous référons à la définition de Numérique ① sur Wikipédia, il est énoncé:

« On a pris l'habitude de désigner comme numériques les données informatiques. » puis il est dit: « La culture numérique désigne, par extension, les relations sociales dans les circonstances où dominent les médias reposant sur ces systèmes. »

Il semble difficile de préciser ce que nous appelons «numérique». Ça semble si vaste, si omniprésent, si ubiquitaire, ... Est-ce notre rapport à la technologie ? Est-ce utiliser un ordinateur ? Scroller sur son smartphone ? Télécharger une application ? Naviguer sur le web ? Se connecter à internet ? Est-ce s'intéresser aux services et aux usages des technologies de l’information et de la communication ? Peut-être pourrions-nous résumer par cette question: En quoi « la culture numérique » ② modifie ou a un impact sur nos vies ? Au fond, c'est un peu ça que nous allons essayer de faire pendant ce quadrimestre en proposant des réflexions communes sur des questionnements que nous avons en partageant des histoires ou anecdote sur le numérique.

①- Numérique, Wikipédia, https://fr.wikipedia.org/wiki/Num%C3%A9rique, 17 octobre 2020 à 13:22. ②- Culture numérique, Wikipédia, https://fr.wikipedia.org/wiki/Culture\_num%C3%A9rique, 8 octobre 2020 à 14:54.

Contenu

Écrire une histoire ou anecdote sur le numérique ou l'informatique.*
Lire les textes proposé.*
Choisir entre l'histoire et un des textes
Réaliser une page web à publier ici -> https://etudiants.le75.be/2024-2025/B2/
Proposer une page web avec le texte mis en page et qui joue avec une idée forte évoqué dans celui-ci.
Proposer une mise en page utilisant des spécificités web (des jeux que nous ne pourrions pas retrouver avec une mise en page papier).
Choisir une typographie pertinente et justifié.
Utiliser des langages Web
N'utiliser pas de framework
Partager vos prompt si vous aidez par l'iA

*Écrire une histoire de 800 à 1200 caractères lié au numérique et/ou à l'informatique. Un moment ou une anecdote dans votre vie où l'interaction ou la pratique de l'informatique et/ou du numérique a provoqué une surprise, une question, un moment gênant ou un sentiment d'absurdité chez vous.

*Les Textes:

https://etudiants.le75.be/2024-2025/B2/Digital-myth/content/

Calendrier

17 septembre de 10h30-12h30 → Groupe 1 et 2

Discussion culture numérique/ c'est quoi le numérique.
Lancement sujet/ lecture Début de démo CSS/HTML

Groupe 1 → Dilara- Lena-Inès-Elsa-Roxana-Lara-Aella-Arthur-Juliette-Élodie

01/10 — 9h30-12h30
22/10 — 9h30-12h30
12/11 — 9h30-12h30
03/12 — 9h30-12h30
17/12 — 9h30-12h30

Groupe 2 → Godric - Chaimae -Wiktor- Jonathan-Lou-Xavier-Deniz-Loic-Anna-Nico

24/09 — 9h30-12h30
15/10 — 9h30-12h30
05/11 — 9h30-12h30
19/11 — 9h30-12h30
10/12 — 9h30 -12h30

Découpage du cours

9h30-10h30: Travail en autonomie
10h30-10h50: Chaque début de cours débat / lecture: 20min
10h50-11h15: Déboguer problème de code en commun: 25min
11h15-12h30: Rdv individuel

Aides techniques

Base Html \& css

Typographie \& Web

Typothèques libres :

Partages de codes et ressources

Dossier de site exemple: https://etudiants.le75.be/2024-2025/B2/Digital-myth/site-exemple.zip

Le pad du cours: https://mypads2.framapad.org/p/digital-myth-code-8y1du79m9

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

C'est quoi les groupes ?
- Groupe 1
  - Dilara- Lena-Inès-Elsa-Roksana-Lara-Aella-Arthur-Juliette-Élodie
- Groupe 2
  - Godric - Chaimae -Wiktor- Jonathan-Lou-Xavier-Deniz-Loic-Anna-Nico
Partage de code ?

Cours du 24/09/2024, groupe2

[]Precense Groupe 2 []

   * Wiktor
   * Loïc
   * Xavier
   * Anna
   * Deniz
   * Nico
   * Jonatan

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

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;

}

_____________

Cours du 01/10/2024, groupe1

Présence :

Arthur
Laraaaaaa
Dilaraaaaa
Roksanaaaaa
Inès
Aëllaaaaaa
Elsaaaaa
Juliette
Elodie
Lenaaaaa

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

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 15/10/2024, groupe2

Présence:

   * Wiktor
   * Loïc
   * Xavier
   * Chaimae
   * Deniz
   * Nico
   * Jonathan
   * Anna

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 utilisé une font, il faut tout d’abords utilisé 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.