Web : CM Flashcards
1
Q
C’est quoi Internet ?
A
C’est un réseaux de réseaux, une interconnection de machine.
2
Q
Quels sont les buts d’internets ?
A
- Tolérance au pannes
- Abstraction de l’infrastructure physique
- Neutralité du réseau (Intelligence à la périphérie)
3
Q
Quels sont les couches d’internet ?
A
- Application > HTTP
- Transport > TCP
- Réseaux > IP
- Liaison > Wifi, Ethernet
- Physique > Calbe en cuivre
4
Q
Pourquoi utiliser une structure en couche pour internet ?
A
- Gain d’isolation
- Résilience et évolution plus facile comme les niveaux sont indépendants
- Chaque élement à une connaisance limité du système global
5
Q
C’est quoi le web ?
A
Interconnections de ressources par l’hypermedia
6
Q
Le web se situe à quelle couche d’internet ?
A
Au dessus de la couche applicative
7
Q
Quels sont les buts du web ?
A
- Etre global
- Semi-Structuré (Impossible de faire des bases de données gigantesque)
- Décentralisé et non supervisé (On peut faire son propre site web)
- Tolérant aux pannes (Cache)
- Extensible et évolutif
8
Q
Quelles sont les contraintes architercturale du web ?
A
- Système client/serveur
- Couplage faible (Découverte du réseaux de lien en lien)
- Représentation homogène (HTML)
- Protocole unique (HTTP)
- Adressage uniforme et indépendant (URL)
9
Q
C’est quoi un site web ?
A
Pas une machine
Pas un domaine
Pas une apparance
C’est un ensemble de ressources “cohérantes”.
10
Q
C’est quoi un agent ? Quel propriété a-t-il ?
A
C’est un logiciel qui joue le role de client.
Il va manipuler les ressources pour l’affichage voire le traitement.
Il maintient l’état du point de vue utilisateur.
Il est indépendant du type de connexion et du type d’appareil.
11
Q
C’est quoi un serveur ? Que fait il ?
A
C’est une machine qui s’execute en permanance pour répondre si une requête client arrive.
Il gère les ressources (Etat, création, destruction) et ses représentation (génération)
Il s’occupe de l’adressage (URL)
12
Q
Quels sont les deux types de serveurs ?
A
Statique - Lit le contenu d’un fichier et se contente de l’envoyer
Application - Lit le contenu d’un fichier et genère une représentation puis l’envoie
13
Q
C’est quoi une paserelle ?
A
Converti les protocoles non http en http
14
Q
C’est quoi le cache ? Où se fait la mémorisation ?
A
Mémorisation des résponses du serveur dans l’agen (Privé/local) ou dans une machine entre l’agent et le serveur (Partagé/proxy).
15
Q
A quoi sert le cache ?
A
- Optimisation des performance
- Tolérance aux pannes
- Passage à l’échele plus simple
16
Q
Où se situe un proxy ? C’est quoi ? A quoi il sert ?
A
Il est coté client
C’est un intermédiaire explicite ou transparant entre le client et le serveur.
Permet de :
- Faire du partage de connection
- Filtrage
- Conversion
- Cache
- Masquage de source
17
Q
C’est quoi un reverse proxy ? A quoi ça sert ?
A
La même chose qu’un proxy mais coté serveur.
Permet de :
- Répartition des charges entre plusieurs serveur (Plusieurs machine genère tout le site)
- Intégration (Plusieurs machine genère une partie du site)
18
Q
C’est quoi l’hypermedia ?
A
C’est un systeme basé sur :
- Une information unitaire :Ressource
- Une information structuré : Des liens typés
- Une structure d’information non linéaire : Graphe
19
Q
Qu’implique l’hypermedia ?
A
On peut créer un site web sans se soucier des liens qui pointent vers nous.
20
Q
Quels sont les modes de parcours de l’hypermedia
A
- Navigation non séquentielle > Découverte dynamique de lien en lien
- Inclusion > Transclusion (On inclu une page dans une autre)
21
Q
C’est quoi une ressource ?
A
C’est un élément d’information abstrait et adressable (URI)
CELA NA RIEN A VOIR AVEC SA REPRESENTATION, UNE MEME RESSOURCE PEUT EN AVOIR PLUSIEURS
22
Q
A quoi sert une référence ?
A
Permet de connecter les ressources en les indentifiants de manière unique
23
Q
Exemple de ressource ?
A
- Profil sur un réseau social
- Article de blog/actualité
24
Q
C’est quoi un URI ?
A
Uniform Ressource Identifier
Il s’agit d’un identifiant unique pour une ressource qui englobe les URL et URN (Uniform Ressource Name).
25
C'est quoi un URL ? A quoi sert elle ? Qui garantie ? Qui la définit ? Donner deux propriétés ?
Identifiant unique d'une ressource.
URL doit faire le lien entre un adressage abstrait vers une représentation physique. (Ce qui n'est pas équivalent)
Garantie par le DNS
Elle est définit par le serveur sans gestions centrale
Propriété :
Elle est déréférençable = Suffisante pour trouver la représentation de la ressource.
Elle est opaque, la comprhéansion sémantique peut se faire uniquement par le serveur. Le client doit naviger
26
C'est quoi un DNS ? Il assure quoi ? Cela aide à quoi ?
Domain Name System
Système qui associe des noms de domaine à des IP.
Plus facile à retenir.
Assure l'indépendance du réseau
27
C'est quoi un CDN ? A quoi ça sert ?
Content Delivery Network
Ensemble de serveur à des zones géoraphique distinctes.
Sert à utiliser le serveur le plus proche du client pour sa requête.
28
La partie d'URL "http" répond à quelle question ? Dans quel sens ? quel est le nom technique ?
Comment
Protocole
Scheme
29
La partie d'URL "www.example.com" répond à quelle question ? Dans quel sens ? quel est le nom technique ?
Où
Serveur
Hostname
30
La partie d'URL ":80" répond à quelle question ? Dans quel sens ? quel est le nom technique ?
Où
Adresse logiciel
Port
31
La partie d'URL "/foo/bar" répond à quelle question ? Dans quel sens ? quel est le nom technique ?
Quoi
Ressource local du serveur
Path
32
La partie d'URL "?a=1&b=2" répond à quelle question ? Dans quel sens ? quel est le nom technique ?
Quoi
Résultat d'un formulaire / argument
Query string
33
La partie d'URL "#ici" répond à quelle question ? Dans quel sens ? quel est le nom technique ?
Quoi
Sous partie d'une page
Fragment
34
Pourquoi il faut respecter les cools URLs don't change ?
On ne peut pas savoir qui a l'ancien url. Si change l'url sans faire de redirection cela créer de la frustration/confusion/perte de confiance pour l'utilisateur car on lève une 404 pour rien.
35
Comment faut il disgner les URL ?
- Il faut réflechir au découplage
- Pas de construction (Ou alors le serveur donne des instructions)
- Pas de compréhension par le client (Autre que la structure)
- Indépendantes des informations variables (Extension, Date, auteur...)
- Courte
- Facile à retenir
- Facile à écrire, dicter, lire
- Bidouillable mais pas requis
36
Pourquoi le client et le serveur sont découplé ?
Parce que aucune information sur le site est codée directement dans le navigateur
37
Que veut dire HTTP ?
Hyper Text Transfer Protocol
38
C'est quoi une requête indempotante ? Quels en sont les propriétés ?
Faire une fois la requête où la faire n fois revient au même
- Indépendance des intermédiaires
- Reprise sur erreur
- Automatisation
39
C'est quoi une requête sans effet de bord ? Quels en sont les propriétés ?
Ne modifie pas l'état de la ressource
Elle est donc "cachable"
40
Donner les méthodes/verbe qui sont indempotente ET sans effet de bord
GET et HEAD
41
Donner les méthodes/verbe qui sont uniquement indempotente
PUT(Mise à jour en écrasant tout) et DELTE
42
Donner le reste des méthode/verbe http
POST(Création/Effet sur la ressource) ET PATCH (Mise à jour incrémentale)
43
Donner les catégories de status/code serveur
1XX : Infomration
2XX : Succès
3XX : Redirection ou pas de contenu
4XX : Erreur du client
5XX : Erreur serveur
44
Pourquoi les catégories sont regroupé par 100aine ?
Pour pouvoir en rajouter après et être capable de dire dans quelle catégorie elle sont si un client n'est pas à jour=> Evolutivité
45
Quels sont les différents type de client et que font ils ? Quel est la deuxième dimension de cela ?
Client léger > Affiche uniquement du html
Client riche > Affiche du html et fait quelque traitement
Client lourd > Affiche et fait la majorité des traitements
Il y a aussi la dimension déploiement, plus le déploiement est lourd plus il faut installer des choses spécifique sur le client. (Exemple discord)
46
Pourquoi les applications migre d'un client dédié vers des applications web ?
Permet d'avoir le navigateur comme platforme
Permet d'avoir du CoD
Pas de déploiement
Evolutivité
Facile a mettre en place > Techno libre
47
C'est quoi le CoD ? A quoi ça sert ?
C'est le Code On Demand. Le serveur envoie le code au client quand il en a besoin, ce qui permet d'éviter une installation.
Ajout de fonction au client générique (applet, plugin...)
48
C'est quoi HTML ? Cela sert à quoi ?
HyperText Markup Language
C'est un langage de balisage qui permet d'ajouter de la sémantique dans une ressource en structurant un document.
49
C'est quoi une grammaire ? Que définit-elle ?
Il s'agit des élements du langages (Vocabulaire)
Ainsi que de la structure qu'on lui donne (Construction)
ELLE DEFINIT UNE SYNTAXE ABSTRAITE
50
C'est quoi la sérialisation ?
C'est le fait de concrétiser une syntaxe abstraite textuellement.
51
C'est quoi SGML ? Que définit-il ? A l'aide de quoi ? De quoi à on besoin pour faire de l'analyse complexe ?
Standard Generalized Markup Language est un méta-langage qui définit une syntaxe concrète indépendament d'une grammaire à l'aide d'un DTD.
Pour faire l'analyse complexe on a besoin d'une grammaire
52
C'est quoi un DTD ? Que définit-il ?
Document Type Definition
Il définit la structure d'un document, les éléments et attributs qui y sont autorisés.
53
C'est que le XML ?
eXtensible Markup Language est un dérivé du SGML qui donne une syntaxe concrète non ambigu.
54
Quels sont les aventages de XML par rapport à SGML ?
Extension > Fusion de langage
Encodage unicode
Grammaire non nécéssaire à l'analyse
Toutes les balises sont forcément fermée
55
C'est quoi un document bien formé ? Pourquoi c'est souhaitable ?
Document qui respecte la syntaxe concrète (Pas forcément la grammaire).
Si il n'est pas bien formé il ne peut pas être lu.
Exemple :
test test2 test3
56
C'est quoi un document valide ? Pourquoi c'est souhaitable ?
En plus d'être bien formé, un document valide :
Document qui respecte la grammaire (Syntaxe abstraite/sens)
Permet d'avoir de la compatibilité et de l'accéssibilité. (Mal voyant par exemple)
Exemple :
Pas de p dans un em
57
C'est quoi le CSS ? A quoi ça sert ?
Cascading Style Sheet permet de définir la représentation des différents élements sémentique du HTML.
58
Donner l'ordre des priorités du CSS, du plus prioritaire au moins prioritaire
Importance: Navigateur < Utilisateur < Auteur < Auteur important! < Utilsateur important!
Spécificité: Nom < Structure < Classe < id
Ordre
59
C'est quoi un sélecteur CSS ? A quoi ça sert ?
C'est ce qui permet au CSS de savoir à quoi appliquer le style.
Exemple :
.oui #non
60
Donner des exemples de pseudo-selecteur
:hover :before :after
61
Citer deux préprocesseur css et surcouche css, a quoi ça sert ?
Sass et Less
Cela permet de :
- Ajouter des variables
- Faire du calcul et des fonctions
- Faire de l'héritage et mixins (Genre de marco en C)
- Imbrication de fonction
62
C'est quoi un applet ?
Mini-logiciel qui s'execute dans le navigateur
63
C'est quoi un SPA ?
Single Page Application
Application web monopage
Qui échange des objets JS (json) avec le client
64
C'est quoi un PWA ?
Progressive Web App
Application Web lourde
Qui échange des objets JS (json) avec le client
65
A quoi servent les SPA et PWA ?
A avoir de l'interactivité (IHM)
A faire moins d'échange client / serveur (Verif formulaire, Rafraichissement partiel, Tri de tableau)
66
C'est quoi l'IHM ?
Interface Homme Machine
67
Quel est le vrai nom du javascript ?
EcmaScript
68
Comment se fait le sous typage en EcmaScript ?
Avec la délégation sur les prototype et par l'héritage uniquement
69
Que permet de faire l'intégration au navigateur de EcmaScript ?
Permet d'intéragir avec le site avec la DOM (Document Object Model)
Fait des événements (Listener par exemple)
API (Historique, fenetre, localisation)
70
Comment s'exéctute EcmaScript ?
Le code brut est envoyé par le serveur au client. Il est pré-compilé par le moteur du navigateur qui le lance ensuite en l'INTEPRETANT et utilise JIT pour aller plus vite.
71
Quels sont les tois méthodes d'exécution d'EcmaScript ?
Au chargement (Ce qui peut être bloquant)
Inline (Dans l'url : javascript:/**/)
Evénementiel (Approche IHM, fonction = élement)
72
Donner les caractéristique de EcmaScript ?
Inteprété (VM)
Evalué Dynamiquement
Typage faible et dynamique (Transtypage automatique avec .valueOf())
Utilise le hoisting
73
C'est quoi le hoisting ?
L'interpreteur fait remonter toutes les déclarations (PAS L'AFFECTATION) de variable tout en haut du scope. Donc une variable définit après un appel de fonction avec celle-ci va quand même marcher.
Exemple :
var x = 12;
sera déclaré en haut du scope
Mais l'affecation = 12 sera faite "au bon endroit"
74
Une variable non intialisé vaut quoi en EcmaScript ?
undifined
75
Que fait for (var i in b) en EcmaScript ? Comment on fait un vrai itérateur.
Il itère sur tout les INDICES des ATTRIBUTS de b
Pas de problème sur une liste mais problème sur un prototype.
Pour faire un vrai itérateur SUR LES VALEURS on utilise for (var a of b)
76
C'est quoi le DOM ? A quoi ça sert ?
Document Objet Model
Interface de programmation normalisé par la W3C qui permet de voir l'arbre HTML sous le paradigme objet.
77
Comment on peut coder une couleur en CSS ?
Additif RGB
Soustractif CMYN
HSL
- Soit avec les fonctions rgb()...
- Soit avec les hexcode
- Soit avec les couleur pré-définies
78
Modèle de boite :
Différence entre les boxes inline et block boxe ?
Les boxes inlines :
- Ne créer pas de retour à la ligne
- Pas de width et height
79
Sur quoi s'applique le hoisting en javascript ?
Sur les var.
Leur portée est un peu perturbante car pas limité au block mais à la fonction (tout le scope)
80
A quoi servent let et const en javascript ?
A définir une variable/constante au niveau du block
81
Comment faire une variable globale en javascript ?
Il suffit de ne pas mettre de mot clef lors de la déclaration
82
Sur quel opérateurs javascript fait du transtypage automatique ? A quelle condition ? Quellle propriété "naturelle" ils ne respecte pas ? Quel méthode il utilise ?
Que vaut false == "false" ?
Que vaut false == "0" ?
!= et == et +
== et != ne sont pas transitif
Il fait le transtypage uniquement quand les types sont différent.
Il utilise valueOf()
Une chaine de caractère vaut faut ssi elle est vide donc ça évalue : false == true =>>>> false
Converti "0" en entier puis converti 0 en booléen (faux) donc retourne vrai.
83
Par quel caractère peut commencer une variable en javascript ?
Lettre unicode, $ et _
84
Javascript:
typeof new Date();
typeof new Integer(10);
typeof Date();
object
object
string
85
Que fait chaque ligne ?
var tab = new Array(1, 2, 'a')
var tab = new Array()
var tab = new Array(5)
[1, 2, 3]
Tableau vide
Tableau vide de 5 élement
86
De quel type sont les clef d'un tableau associatif en js?
String (.toString() sinon)
87
Qu'affiche :
function foo(a, b) {console.log(`a=${a} | b = ${b}`)}
foo()
a = undefined | b = undefined
88
Comment récupérer les restes des arguments d'une fonction ?
Array.from(arguments)
89
Quels sont les propriétés des fonctions en js ?
Ce sont comme des valeurs, elles sont :
- Retournable
- Passable en paramètre
90
C'est quoi une closure en JS ?
Fonction qui dans sa définition contient des variables libre (Pas affecté (ni paramètre ni variable locale)) qu'elle encapsule de son contexte d'exécution.
91
C'est quoi une fonction anonyme ?
Donner deux exemple de fonction annonyme en js (Normal et fléchée)
Fonction
- A la demande
- Locale
var hello = function(name){ return "Hello " + name ; } ;
const hello = (name) => "Hello " + name ;
