Web : CM Flashcards
C’est quoi Internet ?
C’est un réseaux de réseaux, une interconnection de machine.
Quels sont les buts d’internets ?
- Tolérance au pannes
- Abstraction de l’infrastructure physique
- Neutralité du réseau (Intelligence à la périphérie)
Quels sont les couches d’internet ?
- Application > HTTP
- Transport > TCP
- Réseaux > IP
- Liaison > Wifi, Ethernet
- Physique > Calbe en cuivre
Pourquoi utiliser une structure en couche pour internet ?
- Gain d’isolation
- Résilience et évolution plus facile comme les niveaux sont indépendants
- Chaque élement à une connaisance limité du système global
C’est quoi le web ?
Interconnections de ressources par l’hypermedia
Le web se situe à quelle couche d’internet ?
Au dessus de la couche applicative
Quels sont les buts du web ?
- 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
Quelles sont les contraintes architercturale du web ?
- 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)
C’est quoi un site web ?
Pas une machine
Pas un domaine
Pas une apparance
C’est un ensemble de ressources “cohérantes”.
C’est quoi un agent ? Quel propriété a-t-il ?
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.
C’est quoi un serveur ? Que fait il ?
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)
Quels sont les deux types de serveurs ?
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
C’est quoi une paserelle ?
Converti les protocoles non http en http
C’est quoi le cache ? Où se fait la mémorisation ?
Mémorisation des résponses du serveur dans l’agen (Privé/local) ou dans une machine entre l’agent et le serveur (Partagé/proxy).
A quoi sert le cache ?
- Optimisation des performance
- Tolérance aux pannes
- Passage à l’échele plus simple
Où se situe un proxy ? C’est quoi ? A quoi il sert ?
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
C’est quoi un reverse proxy ? A quoi ça sert ?
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)
C’est quoi l’hypermedia ?
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
Qu’implique l’hypermedia ?
On peut créer un site web sans se soucier des liens qui pointent vers nous.
Quels sont les modes de parcours de l’hypermedia
- Navigation non séquentielle > Découverte dynamique de lien en lien
- Inclusion > Transclusion (On inclu une page dans une autre)
C’est quoi une ressource ?
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
A quoi sert une référence ?
Permet de connecter les ressources en les indentifiants de manière unique
Exemple de ressource ?
- Profil sur un réseau social
- Article de blog/actualité
C’est quoi un URI ?
Uniform Ressource Identifier
Il s’agit d’un identifiant unique pour une ressource qui englobe les URL et URN (Uniform Ressource Name).
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
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
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.
La partie d’URL “http” répond à quelle question ? Dans quel sens ? quel est le nom technique ?
Comment
Protocole
Scheme
La partie d’URL “www.example.com” répond à quelle question ? Dans quel sens ? quel est le nom technique ?
Où
Serveur
Hostname
La partie d’URL “:80” répond à quelle question ? Dans quel sens ? quel est le nom technique ?
Où
Adresse logiciel
Port
La partie d’URL “/foo/bar” répond à quelle question ? Dans quel sens ? quel est le nom technique ?
Quoi
Ressource local du serveur
Path
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
La partie d’URL “#ici” répond à quelle question ? Dans quel sens ? quel est le nom technique ?
Quoi
Sous partie d’une page
Fragment
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.
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
Pourquoi le client et le serveur sont découplé ?
Parce que aucune information sur le site est codée directement dans le navigateur
Que veut dire HTTP ?
Hyper Text Transfer Protocol
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
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”
Donner les méthodes/verbe qui sont indempotente ET sans effet de bord
GET et HEAD
Donner les méthodes/verbe qui sont uniquement indempotente
PUT(Mise à jour en écrasant tout) et DELTE
Donner le reste des méthode/verbe http
POST(Création/Effet sur la ressource) ET PATCH (Mise à jour incrémentale)
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
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é
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)
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
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…)
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.
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
C’est quoi la sérialisation ?
C’est le fait de concrétiser une syntaxe abstraite textuellement.
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
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.
C’est que le XML ?
eXtensible Markup Language est un dérivé du SGML qui donne une syntaxe concrète non ambigu.
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
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 :
<a> test <b> test2 </b> test3 </a>
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
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.
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
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
Donner des exemples de pseudo-selecteur
:hover :before :after
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
C’est quoi un applet ?
Mini-logiciel qui s’execute dans le navigateur
C’est quoi un SPA ?
Single Page Application
Application web monopage
Qui échange des objets JS (json) avec le client
C’est quoi un PWA ?
Progressive Web App
Application Web lourde
Qui échange des objets JS (json) avec le client
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)
C’est quoi l’IHM ?
Interface Homme Machine
Quel est le vrai nom du javascript ?
EcmaScript
Comment se fait le sous typage en EcmaScript ?
Avec la délégation sur les prototype et par l’héritage uniquement
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)
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.
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)
Donner les caractéristique de EcmaScript ?
Inteprété (VM)
Evalué Dynamiquement
Typage faible et dynamique (Transtypage automatique avec .valueOf())
Utilise le hoisting
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”
Une variable non intialisé vaut quoi en EcmaScript ?
undifined
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)
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.
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
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
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)
A quoi servent let et const en javascript ?
A définir une variable/constante au niveau du block
Comment faire une variable globale en javascript ?
Il suffit de ne pas mettre de mot clef lors de la déclaration
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.
Par quel caractère peut commencer une variable en javascript ?
Lettre unicode, $ et _
Javascript:
typeof new Date();
typeof new Integer(10);
typeof Date();
object
object
string
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
De quel type sont les clef d’un tableau associatif en js?
String (.toString() sinon)
Qu’affiche :
function foo(a, b) {console.log(a=${a} | b = ${b})}
foo()
a = undefined | b = undefined
Comment récupérer les restes des arguments d’une fonction ?
Array.from(arguments)
Quels sont les propriétés des fonctions en js ?
Ce sont comme des valeurs, elles sont :
- Retournable
- Passable en paramètre
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.
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 ;
