Obtenir la ressource indiquée par l'url, c'est l'objet du protocole HTTP. Il s'agit d'obtenir une ressource indiquée sur le serveur connu ici par son nom. HTTP repose sur une couche de transport fiable, ce qui implique TCP. Pour cela, il faut ouvrir un canal de communication TCP, ce qui implique de connaitre en particulier une adresse IP pour le serveur.
Requêter le DNS pour résoudre le nom, i.e. connaitre l'adresse IP (ou une adresse IP) associée à www710.univ-lyon1.fr. C'est l'objet du protocole DNS. Le protocole DNS repose le plus souvent sur UDP. L'adresse IP du DNS est connue, mais il réside hors du sous-réseau (hypothèse). La requête devra transiter par une passerelle déterminée par le table de routage et qui se situe dans le même sous-réseaux. Pour émettre cette requête, il ne manque que l'adresse matérielle de la passerelle.
Obtenir l'adresse matérielle de la passerelle, c'est l'bjet du protocole ARP. Une requête ARP est construite et à réception de l'adresse attendue, la requête DNS peut être émise. Si la requête est faite au sein du réseau de Lyon1, la résolution est locale. si elle est faite depuis la lune, le protocole DNS va permettre de faire transiter la demande jusqu'à un serveur de nom compétent pour la résolution.
A réception de l'adresse IP de www710.univ-lyon1.fr, l'ouverture d'un canal TCP est négociée: côté serveur le port est implicitement le port 80 et côté client, on observe ici que le port utilisé est le port TCP 1092 (résolu par wireshark en obrpd…)
A l'ouverture de ce canal, la requête HTTP est émise. Le serveur produit deux réponses: un paquet TCP indiquant que le paquet correspondant à la requête a été reçu correctement et la réponse au niveau HTTP du serveur indiquant que la ressource à été déplacée de façon permanente (et sa nouvelle adresse non visible ici).
Le navigateur émet une nouvelle requête HTTP pour obtenir la ressource pointée par /~dclot/. Un accusé de réception est transmis puis le serveur transmet la réponse au niveau HTTP. Celle-ci est saucissonnée en paquets TCP et lorsque tout à été reconstruit, la réponse est visible au niveau HTTP.
Le fichier téléchargé est un fichier HTML comportant des références vers d'autre éléments. Le navigateur entreprend implicitement de les obtenir. Certains sont sur le même serveur. D'autres non…
Certains paquets TCP sont perdus (ou leurs accusés de réception). Les lignes noires correspondent à la gestion de ces pertes. C'est en parti l'objet du protocole TCP.
Pouvez-vous répondre à ces questions?
Quelles sont les fonctions identifiées par les couches du modèle OSI?
Quelles informations sont contenues dans :
un entête ethernet
un entête IP
un entête TCP
Lors d'un processus de communication entre votre poste et un serveur, jusqu'où l'adresse IP de votre interface est-elle transportée? Et l'adresse matérielle de votre interface réseau?
Quel est le rôle d'un serveur DNS?
Quel est le rôle d'une passerelle?
Quelles sont les plages d'adresses privées?
Quelques outils
SMTP - POP/IMAP
ftp, sftp
Telnet, ssh
Connexion Terminal Serveur
Architecture client/serveur
Contexte
Développement des réseaux informatiques
Modèle préexistant : maître-esclave
Le modèle maître-esclave permet de lier deux entités (appareils, processus, hôtes…). Lors de la mise en place de ce schéma, l'une des entités joue le rôle du maître et l'autre l'esclave. Les requêtes/instructions/ordres sont toujours émis du maître vers l'esclave et l'esclave renvoie éventuellement des données en réponse.
Quelques applications aux niveaux matériel et logiciel:
contrôleur (maître) / périphériques (esclaves) via un bus;
CPU (maître) / contrôleurs (esclaves) via un bus;
SETI@Home et NetSolve sont deux logiciels visant à partager les ressources d'une machine connectée à internet dans des buts divers (recherche des ET, calculs scientifiques). Un maître / des millions de machines de particuliers (esclaves) via internet.
Positionnement du modèle client/serveur relativement au modèle maître-esclave
Les entités communicantes dans ce modèle sont des processus, et ils sont à priori distincts (un programme serveur/un programme client);
le serveur rend un «service» (donne l'heure, receptionne des mails, diffuse des pages web, permet d'exécuter des commandes…);
l'établissement de la communication est initiée par le client, et le serveur qui est à l'écoute répond aux sollicitations des clients;
une fois la communication établie, les requêtes constituant le dialogue peuvent être émises par chacune des parties en fonction des objectifs de l'application.
Positionnement du modèle «peer2peer» relativement au modèle client/serveur
Ce modèle dépasse le cadre des communications entre deux entités : on parle d'un réseau P2P formé de nœuds, les échanges prenant place entre les nœuds;
chaque nœud peut être à la fois et en même temps client et serveur dans ce sens où il peut solliciter un service et rendre un service : la notion de service est décentralisée;
chaque processus exécuté en un nœud peut être issu d'un même programme.
Architecture client/serveur
Beware
Un serveur est une machine puissante, dédiée à certains services…
Amalgame de la machine qui rend le ou les services avec les processus serveurs
Le mythe de la puissance…enjeu commercial et plaisir de geek
En fonction de:
la nature du service à rendre (NTP…DVB-IPTV),
des besoins recensés (moins de 20 utilisateurs…plusieurs milliers d'utilisateurs)
et en particulier d'un objectif de qualité pour le rendu de service (rapidité de l'accès au service, tolérance aux pannes, temps de panne acceptable…contextuels - peu critiques pour un particulier, vitaux pour une banque)
une architecture matérielle adhoc peut être nécessaire.
Architecture client/serveur
Conception d'un service
La conception d'un service conduit à divers choix parmi lesquels:
le choix d'un mode de communication
la conception d'une application client
la conception d'une application serveur
Deux modes de communication
Mode connecté (TCP)
comporte une phase de connexion au serveur préalable aux échanges spécifiques pour le service et une phase de déconnexion en fin de communication;
reconstruction des données à l'arrivée, prise en charge des paquets comportant des erreurs ou non-réceptionnés - ce mode assure que les données émises à la source sont identiques à l'arrivée;
il engendre un surcoût pour le système et la bande passante par rapport au mode non-connecté mais apporte une solution à ces problèmes.
Mode non-connecté (UDP)
pas de gestion des arrivées, de l'éventuel désordre des paquets, des erreurs diverses au niveau du système - la gestion de ces problématiques est déportée dans l'application qui les prend en charge en fonction des besoins.
Le choix d'un mode dépend de la nature du service rendu.
Architecture client/serveur
Conception d'un service
Conception d'un client
Elle consiste en général en l'implémentation d'une interface pour l'utilisateur et du protocole d'échange avec le serveur.
Conception d'un serveur
La conception d'un serveur passe par l'implémentation du service, mais aussi la gestion des différents clients
Après son lancement, un serveur attend les requêtes des clients.
Le serveur peut rendre service indéfiniment ou un nombre fini de fois.
Comment gérer plusieurs clients simultanés ou un nouveau client alors qu'un client est déjà en cours de service?
Si on souhaite que les clients soient traités les uns après les autres, on s'oriente vers le serveur dit «itératif». La gestion de la mise en attente des nouveaux clients est implicitement réalisée par le système au moyen d'une file d'attente fifo.
Si le serveur doit gérer les clients en parallèle, il sera dit «concurrent». Son fonctionnement sera le suivant :
attente d'une connexion
reception d'un requête, génération d'un processus fils qui va traiter seul la demande de service (et ce en parallèle) pendant que le processus père attend une nouvelle connexion. Lorsque le fils a terminé un traitement, il libère le canal utilisé et prend fin.
En pratique
les serveurs itératifs en mode non-connecté sont utilisés pour des services très légers (NTP);
les serveurs itératifs en mode connecté sont rares;
les serveurs concurrents en mode connecté sont classiques car ils correspondent à des échanges fiables avec plusieurs clients en parallèle (HTTP, SSH).
les serveurs concurrents en mode non-connecté sont rares (UFTP).
Architecture client/serveur
En pratique
Côté programmation, divers objets existent pour permettre la réalisation d'un service via le réseau
Les sockets
Les RPCs
Les Java RMI
Les sockets
Les sockets sont utiles pour matérialiser le support d'échange d'information entre deux processus.
Concept étendu aujourd'hui à la plupart des environnements (Unix à l'origine)
Une socket matérialise un canal de communication et est gérée comme un fichier - les échanges d'information via une socket entre les processus client et serveur sont similaires à des échanges interprocessus locaux
Les RPC
Les appels de procedure distants (Remote Procedure Call) sont utilisées pour la mise au point d'applications distribuées, i.e. dont l'ensemble est éclaté en morceaux répartis sur différents hôtes. Le service rendu est alors l'exécution de la procédure et la transmission du résultat de cette procédure au client, i.e. au programme qui a appelé cette procédure.
L'environnement d'appel et celui d'exécution de la procédure peuvent être différents - seul le squelette (stub) de la procédure doit être commun aux deux environnements;
Les pointeurs sont banis des arguments possibles d'une RPC;
Les descripteurs de fichiers locaux sont innaccessibles aux procédures distantes;
Parmi les diverses implémentations de RPC, les SUN RPC sont les plus répandues.
Les Java RMI
A la manière des RPC, Java permet l'invocation de méthodes distantes (Remote Method Invocation), i.e. les méthodes d'un objet exécuté par une autre machine virtuelle Java.
CORBA
CORBA (Common Object Request Broker Architecture) est une implémentation du modèle des composants répartis. Ici, ce sont les objets qui peuvent être répartis sur différents hôtes, mais corba réalise un enrobage des objets, permettant ainsi une indépendance relative au langage d'implémentation de l'objet, relative à la plateforme et à l'hôte. Cet enrobage d'un objet (dénommé ORB - Object Request Broker, pour intermédiaire d'accès à l'objet) et l'objet lui même constituent un composant.
Architecture client/serveur
Pouvez-vous répondre à ces questions?
Autour de quel concept le modèle du client/serveur est-il construit?
Qu'est-ce qu'une socket?
Qu'est-ce qu'un serveur concurent en mode connecté? Pouvez-vous en donner des exemples?
Du modèle client-serveur vers le modèle des composants répartis - Synthèse
Quels sont les apports du modèle des composants répartis par rapport au modèle client-serveur?
Qu'est ce qu'un composant?
Quels sont les différents types de transparence introduits?
Quels sont les apports de CORBA?
(X)HTML&CSS - Introduction
Un peu d'histoire
SGML - Standard Generalised Markup Language
SGML est un métalangage servant à définir des langages à balises pour les documents.
Contexte : reflexion autour d'un langage dégagé des limitations physiques des imprimantes.
Principe : séparer la structure d'un document de sa mise en page, cette dernière dépendant du médium de présentation. Eg rfc!
En pratique : les balises permettent d'identifier les éléments structurant tandis que la mise en page est définie par une (ou plus) feuille de style.
La richesse et les propriétés du SGML ont pour contrepartie une grande complexité qui a eu pour conséquence son abandon par la communauté des developpeurs. XML est la simplification la plus répandue de SGML.
Tout document SGML fait référence à une DTD (Document Type Definition) décrivant les balises (et les attributs associés) définissant les structures logiques utilisables dans le document.
(X)HTML&CSS
Un peu d'histoire
HTML - HyperText Markup Language
Objectif de Tim Berners-Lee : définir un langage de description de documentouvert qui serait indépendant du médium du présentation (découle du SGML) et intégrant le concept d'hyperlien.
Période d'évolution de 1989 à 1999 suivi d'une stagnation. Actuellement, les développements se poursuivent autour de la conception de la nouvelle version de HTML, HTML5.0.
Initialement, deux axes de développement d'HTML : développement des éléments sémantiques de description et développement des attributs de style.
Les sponsors (netscape, microsoft) de ces évolutions sont les éditeurs de navigateurs qui mettent l'accent sur le rendu visuel, ce qui conduit notamment à des incohérences sur le plan global : les spécifications officielles de HTML prennent tout en compte alors que les navigateurs les plus populaires ignorent le plus souvent les ajouts imputables à la concurrence.
L'apparition d'un organisme régulateur a permis la restauration d'une cohérence dans le processus de développement de ces langages. Il est actuellement présidé par Tim Berners-Lee. HTML et les autres langages relatifs à la publication d'information par le biais d'internet sont aujourd'hui l'objet de spécifications réalisées par des groupes de travail au sein du W3C (World Wide Web Consortium) .
En pratique : les balises permettent d'identifier les structures, celles-ci pouvant comporter des attributs pour permettre la définition de propriété (de mise en forme - taille, couleur - ou de structuration - identifiant, appartenance à une classe).
<h1 id="Berners" class="forme1">
A Mettre à jour - le dernier standard est HTML5, depuis le 28 octobre 2014!!! La dernière spécification recommandée du langage HTML (XHTML 1.1) délaisse les éléments ou attributs destinés à la mise en forme des éléments structurels. Les éléments de mise en forme sont délaissés (ou déconseillés - «deprecated» dans les spécifications) au profit de l'utilisation des feuilles de style (CSS). Ceci présente divers avantages présentés dans la partie relative à CSS (plus loin). Une des motivations est une meilleure gestion de la diversité des supports d'accès à l'information.
(X)HTML&CSS
Un peu d'histoire
XHTML - Extensible HyperText Markup Language
XML (Extensible Markup Language) est un affaiblissement de SGML, conçu pour rassembler un ensemble de caractéristiques de SGML et dont découle une complexité acceptable par des utilisateurs potentiels.
XHTML est une reformulation d'HTML conforme aux règles d'XML. Ceci a différentes conséquences :
elle rend les documents XHTML exploitables par les outils XML;
XML permet la définition de nouvelles balises, ce qui permet d'étendre un ensemble de balises pour satisfaire de nouveaux besoins - XHTML peut être étendu par le biais de modules, et c'est sur cette caractéristique que réside la capacité d'évolution d'XHTML;
XHTML est conçu pour pouvoir s'adapter aux futurs dispositifs d'accès aux pages web…
CSS - Cascading Style Sheet
CSS est le langage utilisé pour définir la mise en forme d'une page XHTML.
Les motivations pour l'isolement des paramètres de mise en forme sont nombreuses :
Les capacités d'HTML pour de la mise en forme sont faibles - L'élément table est souvent détourné pour positionner des élements dans l'espace d'affichage, ce qui a divers effets indésirables :
code très lourd (imbrications infernales de tables, inclusions de graphiques invisibles pour contraindre la taille des cellules…), donc consommateur de bande passante, long à afficher et pénible à maintenir;
accès à l'information très compliqué par l'intermédiaire de navigateurs non graphiques.
Dans le cadre d'un processus d'édition de page en grand nombre, la distinction des métiers de designer et de rédacteur est naturelle et vitale.
Besoin de mises en forme adaptées à différents supports de restitution de l'information.
CSS remplit son contrat :
ensemble de propriétés de mise en forme très riche;
permet une définition des propriétés de mise en forme à un niveau très fin;
allège le code XHTML;
permet la prise en charge de différents supports de présentation (et en particulier ceux utilisés par les déficients visuels).
(X)HTML&CSS
Web Browsers
Et les navigateurs?
Les navigateurs sont les applications utilisées pour accéder aux pages internet.
Divers types de navigateurs :
les navigateurs graphiques classiques et ceux pour terminaux mobiles;
les navigateurs en mode texte;
les lecteurs d'écran (screen reader);
les navigateurs adaptés aux lecteurs brailles;
…
Ils évoluent constamment pour suivre les évolutions des spécifications, prendre en charge plus de langages (e.g. svg, MathML) et assurer de nouveaux services (e.g. lecture de flux rss).
La prise en charge des différents langages est rarement complète! Il faut toujours se soucier du support assuré par les principaux navigateurs pour la gestion des éléments et des propriétés utilisés dans une page pour s'assurer d'une diffusion correcte la plus grande possible. En particulier, ignorer les lacunes d'un navigateur très répandu peut conduire à une mauvaise diffusion de l'information, à la diffusion d'une information tronquée!
(X)HTML&CSS - HTML
HTML - HyperText Markup Language
Squelette d'un document HTML
Cas classique
<!DOCTYPE HTML PUBLIC "-...">
<html>
<head>
<title>Titre de la page</title>
<meta .... />
…
</head>
<body>
…
</body>
</html>
1 - Déclaration de DTD
2 - ouverture du code html
3 - ouverture de l'entête
4 - titre de la page
5 - balise meta
6 - fin de l'entête
7 - ouverture du corps
8 - fermeture du corps
9 - fermeture du code html
Cas reposant sur les frames (cadres)
<!DOCTYPE HTML PUBLIC "-...">
<html>
<head>
<title> Titre de la page</title>
<meta .... />
…
</head>
<frameset rows="…" >
<frame id="…" src="…"/>
…
</frameset>
<noframe>
<body>
…
</body>
</noframe>
</html>
1 - Déclaration de DTD
2 - ouverture du code html
3 - ouverture de l'entête
4 - titre de la page
5 - balise meta
6 - fin de l'entête
7 - déclaration de la disposition des cadres
8 - premier cadre
9 - fin de la déclaration des cadres
10 - ouverture de noframe
11 - ouverture de body
12 - fermeture du body
13 - fermeture du noframe
14 - fermeture du code html
(X)HTML&CSS
HTML - HyperText Markup Language
Entête
Les informations placées dans l'entête sont des méta-informations par rapport à la page web.
title permet de spécifier un titre pour la page.
meta comporte obligatoirement un attribut content associé à un second attribut, http-equiv ou name.
http-equiv permet de construire un morceau d'entête HTTP. La valeur de http-equiv précède celle de content.
name permet d'indiquer le nom d'une méta-information dont la valeur est fournie par content. name peut prendre des valeurs arbitraires, tout comme content.
style permet de donner des règles de mise en forme à appliquer pour la page. Nous verrons plus tard l'importance relative de règles apparaissant ici et dans une feuille de style externe.
L'attribut type est obligatoire
L'attribut media permet de préciser le support de restitution de la page.
Pour finir, la présente page utilise l'élément générique object pour réaliser l'insertion de la page contenant les frames ci-dessus. Enfin de multiples div permettent de structurer les éléments affichés pour cette présentation, cette structuration étant associée à des règles de mise en forme qui seront décrites plus loin. N'oubliez pas de consulter le code source de cette présentation.
(X)HTML&CSS
HTML - HyperText Markup Language
Les i-frames
Une i-frame permet d'insérer une frame (i.e. liée à une ressource comme une frame classique) en dehors du contexte d'un frameset, e.g. un bloc de texte.
Les éléments présentés ici disposent de nombreux attributs dont l'objet est de définir une propriété de mise en forme. Tout ce qui concerne la mise en forme d'une page devrait être relégué à un langage de mise en forme tel que CSS. Avec ce dernier, il est possible de définir des règles de mise en forme qui peuvent être liées aux éléments d'une page. Pour cela, deux attributs peuvent être utiles :
id permet d'associer à un élément un identifiant, unique dans la page. Dans ce cas, si des règles sont associées à cet identifiant, elles sont appliquées à l'élément.
class permet d'associer un élément à une ou plusieurs classes. Dans ce cas, les règles de mise en forme définies pour ces classes sont appliquées à l'élément.
(X)HTML&CSS
Conception de pages web respectant XHTML1.0
Règles de base
L'élément racine du document doit être précédé d'une déclaration de DTD, l'une des suivantes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
La DTD indiquée dans la déclaration de type de document doit être respectée par le document.
L'élément racine du document doit être html.
L'élément racine du document doit contenir une déclaration xmlns pour l'espace de nom de XHTML.
Passer de HTML4.01 à XHTML1.0 pour la rédaction de pages web
Le passage du HTML 4.01 vers XHTML 1.0 se fait par le respect d'un petit nombre de règles lors de l'écriture de code HTML. Ci-dessous, quelques-unes de ces règles :
Le document doit être bien formé, i.e. les balises doivent être appariées correctement (lorsqu'un appariement est nécessaire). En particulier, il ne doit pas y avoir de chevauchement.
<p>…<em>MOT</p></em>
<p>…<em>MOT</em></p>
Les éléments et les attributs doivent figurer en minuscules.
<LI ID="Toto">MOT</Li>
<li id="Toto">MOT</li>
Les éléments non-vides doivent être encadrés par une balise ouvrante et une balise fermante.
<p>un paragraphe<p>un autre…
<p>un paragraphe</p><p>un autre…</p>
Les valeurs d'attributs doivent toujours être encadrées par des doubles quotes.
<td colspan=3>
<td colspan="3">
Les éléments vides doivent comporter une balise fermante ou une balise ouvrante se terminant par />
<br>
<br/> … <br></br>
HTML introduit pour certains éléments un attribut id et pour d'autres un attribut name. Ces attributs différents servent à définir un identifiant. XHTML préfère un recours systématique à l'attribut id pour jouer le rôle d'identifiant. L'attribut name est voué à disparaitre des prochaines versions d'XHTML.
(X)HTML&CSS
Différences entre HTML4 et HTML5
Selon la note du W3C: HTML5 Differences from HTML4
La nouvelle recommandation HTML définit une nouvelle syntaxe, des évolutions du langage, un nouveau modele de construciton de page et des évolutions fonctionnelles à travers des API. Cf http://www.w3.org/TR/html5-diff/ pour l'ensemble des détails.
Syntaxe: deux syntaxes sont autorisées:
la syntaxe XML - cette dernière est inchangée;
la syntaxe HTML qui introduit des simplifications. La déclaration du jeu de caractère doit être réalisée au début du document (avant les 1024 premiers octets du document) avec par exemple <meta charset="UTF-8">. La déclaration de la DTD se limite à <!DOCTYPE html>.
Langage: nouveux élements, nouveaux attributs, ainsi que des modifications et des retraits.
Modèle de contenu: ce modèle définit comment les éléments peuvent être imbriqués, i.e. quel élément peut être fils d'un autre.
API: api pour la gestion des fichiers média (vidéo, audio), gestion du cache, impression …
(X)HTML&CSS - CSS
CSS - Cascading Style Sheet
Le langage CSS permet la spécification de règles de mise en forme pour les éléments d'un document en fonction du support de présentation de ce document. Les spécifications dont ce langage est l'objet décrivent également le mécanisme par lequel ces règles sont utilisées pour permettre la détermination des valeurs associées aux propriétés.
L'arborescence du document et les valeurs des propriétés
Un document HTML est composé d'éléments organisés en arborescence. Ce concept d'arborescence s'accompagne des concepts de parent, enfant, descendant, ancêtre, frère… Une fois cette arborescence analysée, il faut assigner à chaque propriété de chaque élément sa valeur (correspondant au type du médium). La valeur associée à une propriété est obtenue par un processus comportant quatre étapes :
La valeur associée à la propriété est déterminée : soit elle est obtenue explicitement d'après les règles énoncées et après application du processus de cascade, soit elle est héritée, soit une valeur implicite est utilisée.
La valeur obtenue précédemment peut faire l'objet de calcul dissociés des calculs liés au formatage (transformation des unités en pixels…).
Le formatage permet le calcul de certaines valeurs (comme celles exprimées sous forme de pourcentage d'une taille de conteneur…).
Les valeurs réelles peuvent être affinées afin de tenir compte des contraintes du navigateur (qui ne dispose pas d'une police dans la taille voulue…).
(X)HTML&CSS
CSS - Cascading Style Sheet
Et la cascade?
Le terme CSS fait référence à une partie du mécanisme employé pour l'application des règles : le mécanisme baptisé de cascade. Les règles (on parle plus volontier de feuille de style) peuvent avoir trois origines :
l'auteur du document peut définir des règles, mais pas seulement lui…
l'utilisateur du navigateur peut également avoir des préférences qu'il peut déclarer dans une feuille de style connue du navigateur;
enfin, le navigateur peut avoir sa propre feuille de style pour définir un comportement implicite qui lui est propre.
Les règles ainsi définies peuvent se chevaucher, se contredire ou se compléter. Le processus de cascade définit le calcul d'un poids, ce poids étant utilisé pour départager des règles contradictoires (la règle de plus grand poids est retenue pour définir la valeur associée à la propriété concernée). Le mécanisme de cascade comporte quatre étapes :
Trouver toutes les règles concernant la propriété d'un élément (et en relation avec le type de médium).
S'il y en a plusieurs, trier par importance croissante selon l'ordre suivant (basé sur l'origine et l'importance) : règle navigateur < règle utilisateur < règle auteur < règle auteur étiquetée importante < règle utilisateur étiquetée importante
S'il y a en plusieurs au premier rang, trier les règles par spécificité croissante (une méthode simple de calcul de la spécificité est définie au sein du processus de cascade et décrite ici - elle prend en compte divers éléments informatifs du sélecteurs et la localisation de la règle afin de favoriser la règle la moins «générale»).
A importances, origines et spécificités respectives égales, choisir la règle énoncée en dernier (les règles issues des feuilles externes étant considérées comme placées avant celles données dans la feuille)
(X)HTML&CSS
CSS - Cascading Style Sheet
Place du code CSS
Le code CSS peut être isolé dans un fichier ou placé dans l'entête d'un document (X)HTML ou disséminé dans les élements concernés par le biais de l'attribut style, ce qui appelle quelques remarques:
L'emploi d'un fichier permet de centraliser les règles et d'y faire référence dans un nombre arbitraire de fichiers. Ceci garantit également la cohérence de la mise en forme lorsque des changements sont décidés.
La déclaration de style dans l'entête d'un document permet de factoriser les règles de mise en forme au niveau du document, ce qui est déjà un premier pas.
Le recours à l'attribut style des éléments HTML devrait être réservé à des besoins ponctuels…
La localisation d'une règle sera déterminante pour son application à un élément par rapport à des règles concurrentes comme expliqué plus haut.
(X)HTML&CSS
CSS - Cascading Style Sheet
Syntaxe
Le code CSS est formé de différents éléments :
d'ensemble de règles (rule set), un ensemble étant formé d'un sélecteur suivi du caractère «:» suivi d'un bloc de déclaration de propriétés;
de règles «at» (at-rule), débutant par un caractère @ suivi d'un identifiant suivi d'un bloc dépendant de l'identifiant;
de commentaires.
Commentaires
Il est possible d'insérer des commentaires entre les éléments déclaratifs d'une feuille CSS. Un commentaire est délimité à gauche par /* et à droite par */.
Règles
Le principe global de CSS est de définir des règles qui permettent d'ajuster des propriétés de mise en forme en indiquant les éléments concernés avec un certain niveau de généralité et en précisant éventuellement un contexte d'application dépendant de la nature du support de restitution de l'information.
L'ajustement d'une propriété est de la forme propriété : valeur;
Un ensemble de règles est de la forme selecteur { prop1 : valeur1; prop2 : valeur2 }
La déclaration d'un contexte particulier passe par une règle at comme ci-contre : @media print {body { font-size: 10pt }}
Après une présentation des différents sélecteurs, un aperçu des propriétés et des valeurs possibles sera proposé.
(X)HTML&CSS
CSS - Cascading Style Sheet
Sélecteurs
Un sélecteur permet d'identifier les éléments pour lesquels les propriétés seront ajustées.
Sélecteur
Signification
*
selecteur universel, permettant de désigner tout élément du document
type d'élément e.g. h1, p, span
tout élément du type indiqué
.Nom2Classe
tout élément appartenant à la classe Nom2Classe. L'appartenance d'un élément à une classe est spécifiée à l'aide de l'attribut class.
type.Nom2Classe
tout élément du type indiqué et appartenant à la classe
pseudo-éléments correspondant respectivement à la première lettre, à la première ligne et au premier enfant puis au premier enfant d'un élément de type donné
:hover, :active, :focus, :link, :visited, :lang
pseudo-classes correspondant à trois types de propriétés : les trois premières concernent respectivement l'élément survolé par le pointeur de la souris, celui activé et celui sélectionné (i.e. sensible aux interactions via le clavier, comme un champ de saisie), les deux suivantes distinguent les liens non encore visités de ceux déjà visités (d'après l'historique maintenu par le navigateur) et enfin les éléments pour lesquels un attribut lang a reçu une valeur particulière.
sel1 sel2
désigne tout élément désigné par sel2 qui est en même temps descendant d'un élément désigné par sel1
sel1 > sel2
restriction aux éléments désignés par sel2 qui sont descendants directs d'un élément désigné par sel1
sel1 +sel2
désigne tout élément désigné par sel2 qui est le premier voisin suivant un élement désigné par sel1
[Attr] [Attr="val"] [Attr~="val"] [Attr|="val"]
désigne respectivement les éléments pour lesquels l'attribut Attr est défini, pour lesquels l'attribut a la valeur val, pour lesquels la valeur de l'attribut contient la valeur val et enfin ceux pour lesquels la valeur de l'attribut commence par val.
sel1, sel2
applique les ajustements aux éléments désignés par sel1 ou sel2
(X)HTML&CSS
CSS - Cascading Style Sheet
Propriétés et valeurs
Les couleurs :
Plusieurs propriétés acceptent comme valeurs des couleurs : color qui désigne la couleur de premier plan, background qui concerne l'arrière-plan, border qui définit la bordure d'un élément…
Les valeurs possibles sont des noms prédéfinis (red, gray, green), ou des valeurs de la forme rgb(0,0,255) ou rgb(0%,0%,100%) ou #0000ff ou encore #00f.
Il est important de toujours accompagner le paramétrage d'un premier plan avec celui de l'arrière plan correspondant.
Pour réaliser un choix de couleurs bien adapté à un large public :
Les couleurs peuvent être intéressantes pour mettre en évidence des informations, pour structurer et faciliter la lecture de tables…
Les mesures :
Comme les couleurs, les mesures servent au positionnement de plusieurs propriétés : width/height pour la largeur/hauteur d'un élément, border pour l'épaisseur de la bordure d'un élément, margin pour l'espace reservé pour la marge…
Les valeurs peuvent être relatives à une valeur dépendant de l'élément en question ou exprimées de façon absolue à l'aide d'unités métriques ou dépendant du support de restitution ou d'un élément particulier:
80% en référence à une certaine mesure (en fonction de l'élément concerné, il peut s'agir d'une valeur calculée ou d'une valeur héritée)
10in(10 pouces) ou 25.4cm ou 254mm ou 720pt(720 points) ou 8640pc(8640 picas)
100px pour 100 pixels
1em correspond à la taille de la police en cours et 1ex correspond à la hauteur de la lettre x de la police en cours.
La valeur inherit est acceptée par toutes les propriétés. Certaines admettent cette valeur comme implicite, ce qui conduit à l'adoption de la valeur de l'élément parent lorsqu'aucune règle plus spécifique n'est donnée.
(X)HTML&CSS
CSS - Cascading Style Sheet
Propriétés et valeurs
Propriétés pour l'ajustement des polices :
font-family : fonte1, fonte2, "nom de fonte", fonte4 où la propriété font-family est suivie d'une liste de noms de famille de polices, la première existant sur le système étant retenue et la dernière devant être par précaution un nom de famille générique (serif, sans-serif, monospace, cursive ou fantasy);
font-size accepte des valeurs absolues ou relatives ainsi que les valeurs xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller;
font-style accepte comme valeur italic, oblique, roman, normal;
font-weight accepte comme valeur normal, lighter, bold, bolder ou une valeur arrondie à la centaine et comprise entre 100 et 900;
font-variant accepte comme valeur normal et small-caps;
font accepte une liste constituée des valeurs des différentes propriétés précédentes, ces valeurs étant séparées par des espaces - c'est un raccourci en quelque sorte.
Propriétés pour l'ajustement du texte
text-align accepte comme valeur left, center, right et justify pour l'alignement des éléments organisés en lignes d'un bloc - en particulier les mots d'un paragraphe;
text-decoration accepte une liste formée des valeurs underline, overline, line-through, blink, ou la valeur none (ou inherit);
text-indent accepte comme valeur des mesures pour l'indentation de la première ligne d'un bloc - une valeur positive conduit à un recul du debut de ligne vers l'intérieur du bloc;
text-transform accepte comme valeur none, capitalized, uppercase, lowercase.
line-height accepte comme valeur normal et des longueurs;
letter-spacing et word-spacing acceptent comme valeur normal et des longueurs;
white-space accepte comme valeur normal, pre, nowrap, pre-wrap, pre-line, permettant de définir le traitement des séquences de caractères d'espace et des coupures de ligne. La première valeur est le cas usuel dans lequel plusieurs espaces sont remplacés par un seul et les lignes sont coupées afin de ne pas déborder de leur conteneur. La seconde permet de préserver les séquences d'espaces et d'empecher les coupures de lignes. La troisième permet de résumer une suite d'espace par un seul mais empèche les coupure de lignes. La quatrième permet de préserver les espaces et autorise les coupures de lignes…
(X)HTML&CSS
CSS - Cascading Style Sheet
Propriétés et valeurs
Propriétés pour l'ajustement des listes :
list-style-type accepte les valeurs disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha, none afin de préciser la nature de la puce utilisée pour marquer le début d'un item;
list-style-image accepte comme valeur none ou une valeur de la forme url("http://../puce.jpg") lorsqu'une image est utilisée comme puce;
list-style-position accepte comme valeur inside, outside, correspondant à un positionnement des lignes suivantes sous la puce, resp en retrait par rapport à la puce;
list-style accepte une liste constituée des valeurs des propriétés précédentes.
Propriétés pour l'ajustement de l'espacement et des bordures :
Chaque élément de l'arborescence pris isolément est contenu dans une boîte : le formatage visuel peut se concevoir comme la définition des dimensions de ces boites et à leur positionnement. En réalité, d'autres propriétés caractérisent les boites, telles que l'organisation des éléments à l'intérieur de cette boite, le fait qu'elle soit flottante ou non, etc. Le formatage visuel est l'objet d'une description extrêmement précise qui débute ici et se prolonge là.
Différentes couches, dont les épaisseurs sont ajustables, enrobent le contenu : une bordure (border) séparée du contenu par un espace nommé «padding» (remplissage) et entourée d'un espace nommé «margin» (marge).
border-left-width, border-left-color, border-left-style correspondent aux propriétés de la bordure gauche d'un objet. border-left est un raccourci acceptant comme valeur une liste des valeurs des propriétés précédentes séparées par des espaces. Le left se remplace par right, top, bottom ou rien en fonction de la région de la bordure concernée.
Les valeurs possibles pour border-left-style sont none, hidden, dotted, dashed, solid, double, groove, ridge, inset et outset.
Les valeurs possibles pour border-left-color sont la valeur transparent ou une couleur.
Propriétés pour l'ajustement du positionnement des éléments : cf ici
Implicitement, tout élément s'insére dans le flot normal d'élément. La propriété position a alors pour valeur static.
Il est possible de faire sortir un élément de ce flot normal. Ceci se fait en ajustant la valeur de position:
relative par rapport à la position qu'il aurait occupé dans le flot normal - dans ce cas, et les deux suivants, les propriétés top, bottom, left et right permettent de préciser ce décalage;
absolute par rapport à son premier ancètre qui n'a pas pour valeur static pour position;
fixed par rapport à la fenêtre de visualisation (i.e. la fenêtre du navigateur).
Eléments flottants et autres détails…une autre fois! Eléments flottants et autres détails…une autre fois! Eléments flottants et autres détails…une autre fois!
Eléments flottants et autres détails…une autre fois!
Eléments flottants et autres détails…une autre fois!
Eléments flottants et autres détails…une autre fois!
Eléments flottants et autres détails…une autre fois!
Eléments flottants et autres détails…une autre fois!
Eléments flottants et autres détails…une autre fois!
Eléments flottants et autres détails…une autre fois!
Eléments flottants et autres détails…une autre fois!
Eléments flottants et autres détails…une autre fois!
(X)HTML&CSS
CSS - Cascading Style Sheet
Régles @
Il existe différents types de at-rules :
@import permet d'importer les feuilles de style présentes dans d'autres fichiers. Ces imports doivent être déclarés avant tout ensemble de règles. Le premier argument indique la source et un second argument optionnel peut indiquer à quel type de média les règles seront associées.
@media permet d'indiquer la nature du média concerné par un ensemble de règles. @media est suivi d'une liste de type dont les valeurs sont séparées par des virgules, puis les règles associées sont rassemblées entre accolades après cette liste.
La définition de règles spécifiques pour l'impression est souvent utilisée pour minimiser les mises en formes couteuses en encre et assurer une meilleure lisibilité. Les types de média sont définis par CSS sont les suivants:
all désigne tout type de média;
braille, embossed, désignent respectivement les dispositifs braille de feed-back et les imprimantes braille;
handheld désigne les terminaux mobiles (dont les téléphones);
print désigne les impressions;
projection
screen
speech désigne les synthétiseurs vocaux;
tty désigne les terminaux formés de grilles de caractères de taille fixe (dont les terminaux de commande);
tv
Il existe d'autres types de règles mais dont le support est encore limité sur les principaux navigateurs : @charset, @font-face, @page,
@namespace.
(X)HTML&CSS
CSS - Cascading Style Sheet
Exemples
Ci-dessous, quelques extraits des fichiers comportant des règles de mise en forme CSS:
D'abord le fichier html qui fait référence à des feuilles de style et qui comporte des règles intéressantes:
…et un bout du fichier jquery.mobile-1.3.1.min.css. Ce dernier a été traité afin de réduire sa taille. L'idée bien entendu est de travailler sur un fichier lisible, mais de réduire sa taille pour la «mise en production». Dans une optique d'optimisation de bande passante ou de rapidité d'affichage, il est possible d'utiliser des outils permettant de »minimiser« la taille du code css, le code html, etc.
Il existe des outils de validation (et de correction pour HTML) pour les documents XHTML et CSS. Les outils indiqués ci-dessous peuvent être utilisés pour contrôler le code d'un document déjà en ligne ou d'un fichier local. Des références à ces outils peuvent également être insérées dans la page web pour fournir un accès plus immédiat à ces outils.
Le livre Web Design for Developers: A Programmer's Guide to Design Tools and Techniques édité par The Pragmatic Programmers est un ouvrage intéressant pour l'ensemble des considérations qu'il aborde.
Keep in touch!
Au fil du temps, il est important de garder un œil sur l'actualité de ces technologies, le statut des spécifications, la préparation de nouveautés (e.g. webfonts en draft au 2010-09)… Consultez par exemple par ici..
(X)HTML&CSS
Pas si vite! Goutez moi ça.
La sortie de HTML5 serait imminente est en cours…du côté des implémentations. Pour le standard, il faudra encore attendre «un peu».dépassé!!
Le HTML5 est une recommandation du W3C depuis le 28 octobre 2014! Check it out here.
Ce standard vise à remplacer trois standards:
HTML 4.01
XHTML 1.0
DOM Level 2 HTML
Voici une petite sélection faite parmi de nombreuses nouveautés:
intégration transparente d'éléments issus de MathML et SVG;
intégration directe de contenu multimédia audio et vidéo;
exécution de scripts asynchrones - sans intervention d'Ajax;
gestion des éléments gérés en cache;
… ajout de nombreux éléments et attributs, suppression de quelques autres (e.g. frameset, frame et noframe)
Avant de croire que XHTML est enterré, assurez-vous du support de HTML5 sur les différents navigateurs ici par exemple (et de la répartition des versions des différents navigateurs de votre audience!! Cf ici).
Les évolutions autour de CCS3 prennent forme!
Le travail autour de CCS3 est éclaté en différentes problématiques: sélecteurs, couleurs et transparence, arrière-plan et bordures, animations… Pour avoir une idée du foisonnement, consultez ça
Notez bien que le support par les différents navigateurs pour ces divers éléments est extrêmement variable. De nombreuses propriétés existent à travers leurs déclinaisons propres à un navigateur particulier. Cf http://www.colorzilla.com/gradient-editor/ pour un aperçu concernant les gradients. Il faut toujours prévoir la mise en forme en cas d'absence de support sur un navigateur pour la propriété souhaitée - i.e. une mise en forme reposant sur des propriétés standards.
Quelle bonne pratique tend à satisfaire le langage CSS?
De quels outils dispose-t-on pour valider du HTML5?
Où rechercher des informations précises sur les langages intervenant dans la réalisation de pages web?
Où rechercher des informations sur le support par un navigateur particulier d'un élément d'un langage (HTML, CSS, SVG…)
Construction du Web 2.0
Retour sur les exposés courts - critiques constructives
Remarques d'ordre général
Orthographe (la gravité est aussi fonction de la taille de police)
Exemples et illustrations bien choisis, simples à comprendre - longues listes d'application à éviter (pratique pour meubler, mais perte de temps et soporifique)
Respect du temps imparti
Remarques relatives à la mise en forme
Gare aux slides surchargés
…et aux copier-coller modifiant la mise en forme (les changements de police trompent rarement)
Le contraste n'est pas le même sur l'écran et le vidéo-projecteur
Préparation de l'oral, réglages techniques
préparation en binôme pour le contenu des slides (échanges constructifs) et répétitions (pour ne pas découvrir in situ le discours du binôme… ni assister à son propre naufrage)
capacité à relancer la présentation en cas de panne sèche (gestion du trac)
connaissance de l'environnement logiciel et de l'application utilisée
préparation du matériel (reconnaissance du vidéo…)
préparation de supports de secours, de solutions de secours
Et vous, qu'avez-vous appris et retenu…
de votre travail?
de celui des autres?
Construction du Web 2.0
Du statique vers l'hyperconnectivité, en passant par le dynamique
HTML, DOM & Javascript
AJAX
Cloud
Bonnes pratiques de programmation
Versionning et outils de partage
Les VCS (Version Control Systems) sont des outils permettant de suivre dans le temps un ensemble de fichiers. Ils sont construits autour de programmes simples dont l'objet est la gestion des différences entre versions d'un fichier. Tout est parti de diff…
Problème général : comment conserver les différentes versions d'un fichier? Plusieurs solutions :
Conserver chaque fichier dans toutes ses versions;
Conserver chaque ligne apparaissant dans une des versions et connaître pour chaque version les lignes la constituant;
Conserver uniquement une liste d'opérations permettant de transformer la version précédente en la version suivante. Il est possible de rechercher la plus longue chaîne commune entre deux items et en déduire les parties à retirer de (ajouter à) la version antérieure pour obtenir la dernière version - ce que fait diff
Potentialité de diff = intérêt a priori (économie de place) + contexte (unix i.e. lien avec d'autres commandes…)
Formats : exemples, et colordiff
Ce-dessous, deux versions d'un même fichier:
<html>
<body>
<h1>Page de Bob</h1>
<p>Ceci est un paragraphe.</p>
<br/>
<p>Ceci est un paragraphe</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.../...dtd">
<html>
<head>
<title>Page de Bob</title>
</head>
<body>
<h1>Page de Bob</h1>
<p>Ceci est un paragraphe.</p>
<br/>
<p>Ceci est un paragraphe.</p>
</body>
</html>
La commande diff indique les opérations à réaliser (avec une syntaxe proche de celle de ed) pour passer du fichier indiqué en premier argument au fichier passé en second argument:
bob@minisfa:~ > diff F1 F2
0a1
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1a3,5
> <head>
> <title>Page de Bob</title>
> </head>
6c10
< <p>Ceci est un paragraphe</p>
---
> <p>Ceci est un paragraphe.</p>
La sortie précédente se limite au strict nécessaire. Il est possible d'insérer des lignes supplémentaires permettant de re-situer des lignes modifiées dans leur contexte. Notez les utilisations de la commande colordiff.
bob@minisfa:~ > diff -u F1 F2 | colordiff ... ou ... bob@minisafa:~ > colordiff F1 F2
--- F1 2010-11-11 21:12:48.000000000 +0100+++ F2 2010-11-11 21:13:16.000000000 +0100@@ -1,8 +1,12 @@+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
+ <head>+ <title>Page de Bob</title>+ </head>
<body>
<h1>Page de Bob</h1>
<p>Ceci est un paragraphe.</p>
<br/>
- <p>Ceci est un paragraphe</p>+ <p>Ceci est un paragraphe.</p>
</body>
</html>
Les lignes supplémentaires font gagner en lisibilité, mais laissent également une chance d'appliquer les opérations alors que de petites modifications ont été introduites entre les deux versions qui ont servi à construire le diff. Le «contexte» fourni par les lignes supplémentaires peut s'avérer précieux!
Lien avec d'autres commandes
diff sait produire des scripts pour ed
bob@minisfa:~ > diff -e F1 F2
6c
<p>Ceci est un paragraphe.</p>
.
1a
<head>
<title>Page de Bob</title>
</head>
.
0a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
.
bob@minisfa:~ > { diff -e F1 F2 echo w;} | ed - F1
bob@minisfa:~ > diff -e F1 F2
patch permet d'appliquer le patch...
bob@minisfa:~ > diff -u F1 F2 > LePatch
bob@minisfa:~ > patch < LePatch
patching file F1
bob@minisfa:~ > diff F1 F2
bob@minisfa:~ > patch -R < LePatch
patching file F1
bob@minisfa:~ > diff F1 F2
0a1
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1a3,5
> <head>
> <title>Page de Bob</title>
> </head>
6c10
< <p>Ceci est un paragraphe</p>
---
> <p>Ceci est un paragraphe.</p>
…et de le retirer! Il sait également tirer profit du «contexte» quand cela est encore possible. patch permet beaucoup, mais ce n'est pas l'objet ici (par ici les curieux. ou Cf. le manuel).
Extensions
Traitement récursif de répertoires
Traitement de fichiers binaires (bsdiff et bspatch)
bzdiff, zdiff pour travailler sur du texte compressé
lien avec les VCS
Il est possible de composer des patchs : en appliquant au fichier initial F1 le diff obtenu à partir de F1 et F2 et en appliquant au résultat le diff obtenu à partir de F2 et F3, F3 est reconstitué.
Ceci pose le mécanisme au cœur d'une grande partie des VCS (d'abord SCCS, puis RCS, CVS, Git), autour duquel des améliorations ont été construites au fil du temps.
Parfois, c'est la dernière version qui est conservée et les diff sont faits pour passer d'une version à la précédente…car la dernière version est en général celle sur laquelle le travail porte.
Bonnes pratiques de programmation
Versionning et outils de partage
Les outils diff et patch ne suffisent pas en général pas à gérer toute la descendance d'un fichier, car assez naturellement, une descendance prend souvent une forme d'arborescence:
Une équipe peut être amenée à corriger les bugs rencontrés par des tiers dans une version particulière d'un fichier (ce fichier pouvant être une application informatique, mais aussi le texte d'un contrat…) alors que dans le même temps, plusieurs pistes de développement, éventuellement instables ou expérimentales, sont poursuivies et qu'une version stable (au moins une) est également maintenue.
Les VCS (Version Control Systems) permettent de réaliser ce saut, en introduisant notamment la possibilité d'introduire des branchements dans l'évolution suivie par un fichier. Au fil du temps, la reflexion sous-tendant les VCS a absorbé diverses considérations dérivant de l'extension du suivi d'un fichier au contexte de la gestion de projet (plusieurs fichiers, plusieurs acteurs…):
Le suivi devrait se situer au niveau macro (i.e. à l'ensemble des fichiers correspondant à l'état d'un projet, du développement d'une application). Une vue micro (au niveau du fichier) peut être rapidement limitée.
Un VCS devrait définir un mécanisme de protection des fichiers réservés au suivi des fichiers afin d'éviter les actions d'utilisateurs maladroits ou malicieux pouvant «casser» le suivi.
Il est important de pouvoir associer des méta-données à l'arborescence, afin de permettre l'ajout de commentaires et encore de connaitre les auteurs des modifications commises.
Deux modèles existent pour l'accès aux versions des fichiers via les opérations d'un VCS:
un modèle centralisé dans lequel les versions sont accessibles sur un dépôt centralisé (accessible via le réseau); les utilisateurs peuvent récuperer une version particulière, mettre à jour la dernière version d'une branche à partir de leur copie de travail…mais tous les opérations se font en général (et en particulier celles faisant intervenir différentes versions) sur le serveur.
un modèle décentralisé dans lequel chaque utilisateur dispose d'une copie du dépôt, i.e. de tout l'historique de l'ensemble des fichiers. Les échanges entre utilisateurs passent par le stockage d'un dépot de référence sur un serveur : celui-ci peut être mis à jour par les utilisateurs.
Dans les modèles présentés, le problème des accès concurents se pose, ainsi que le pb des accès proches :
si deux utilisateurs veulent mettre à jour le même fichier (ou ensemble de fichiers) au même moment, sans mécanisme garantissant la cohérence des opérations, l'issue est complétement arbitraire. Deux solutions existent pour ces accès concurrentiels:
le verrouillage des fichiers : un seul utilisateur à la fois peut obtenir la permission de modifier un fichier…la cohérence est assurée, mais il y a possibilité de blocage des autres utilisateurs aussi!
Les VCS, pour la plupart, forcent la sérialisation des «commit» (opérations de mise à jour) et n'opérent une mise à jour que si elle conduit le dépôt à un état cohérent. En particulier, un commit interrompu n'affectera pas le dépôt.
Il est possible qu'au moins deux utilisateurs souhaitent apporter leurs contributions respectives : le premier sera satisfait, mais il reste une chance au second que la mise à jour qu'il propose soit acceptée en l'état grâce à la fusion des modifications : les modifications apportées par deux utilisateurs peuvent ne pas interferer, e.g. si les modifications ne portent pas sur les mêmes parties d'un fichier… ainsi, il est possible que deux jeux de modifications puissent être fusionnés. Si tel n'est pas le cas, le second sera appelé par le VCS à tenir compte de la nouvelle version pour y incorporer ses propres ajouts.
Bonnes pratiques de programmation
Versionning et outils de partage
Outils
Les VCS sont nombreux et variés (e.g. ici). Parmi les plus répandus, CVS, Subversion et GIT.
La maîtrise d'un VCS passe par la compréhension des concepts qu'il manipule (et en particulier des liens avec les fichiers sous-jacents) et des opérations afférentes. Beaucoup de concepts se retrouvent d'un VCS à l'autre sous le même langage technique (repository, working copy, commit, check-out, update…). Il y a différents profils d'utilisation d'un VCS, et un utilisateur peut se limiter aux opérations du niveau qui l'intéresse :
utilisateur isolé;
utilisateur participant à un travail partagé par un groupe d'utilisateur;
utilisateur participant à l'intégration des versions au dépôt;
utilisateur participant à la gestion, l'administration du dépôt.
Un VCS n'est pas un système de backup (même si cela peut y ressembler) et ne peut s'y substituer!
Vous n'appelez plus vos fichiers projet.pdf…
et vous trouvez des limites à les nommer TER-2012_13-CBonLCasADio_v0.8.2.pdf. Vous êtes sur la bonne voie. Un VCS permet d'introduire des méta-données sur les versions des fichiers - la valeur ajoutée de l'ajout quasi-systématique de commentaires à vos fichiers est enorme.
Adoptez un VCS!!
Bonnes pratiques de programmation
Frameworks
Principe
Boîte à outil logicielle construite comme solution à un problème assez général et souvent basée sur des design patterns. Il est ainsi possible de reposer sur les éléments du framework ce qui est un gain de développement pour construire une solution pout un projet. La définition devrait être appronfondie! Ces frameworks sont souvent le résultat d'un travail prenant en compte une large expérience des solutions testées pour répondre à un besoin. Il est fréquent que la communauté d'utilisateurs fournissent un support important.
Exemples
Framework Java: J2SE
Framework pour GUI Java: swing, Qt, JavaFX
Framework pour tests unitaire: JUnit (Java)
Framework Web: Rails (ruby), Symfony (PHP)
sass
Framework Javascript: JQuery, JQuery mobile
Cherchez le framework adapté à votre projet
Ne ré-inventez pas la roue dans le langage que vous devez utiliser: Cherchez s'il existe un framework proposant une grande partie des fonctionnalités que vous cherchez, et étudiez sérieusement son intégration à votre développement.
Retour d'expérience sur jQuery et jQuery Mobile
Bonnes pratiques de programmation
Tests
Principe
Savez-vous qu'il existe de nombreux outils permettant de concevoir des tests dans le langage de programmation de votre application?
Divers objectfs
au moins pour éviter des situations de regression du code;
s'il sont écrits à l'avance, pour guider l'écriture d'un code en fixant ses objectifs, à la manière d'un contrat;
au fil de l'écriture et de l'évolution d'un code, les tests s'affinent et s'enrichissent;
pour faciliter le travail en groupe, en fournissant un moyen de contrôler que les objectifs définis par chacun sont tous satisfaits;
existe-t-il des outils pour écrire des tests de façon simple pour mon langage de programmation?
Java : JUnit
C++ : CPPUnit
Ruby :
Python : PyUnit
Les outils permettant de mettre en place des tests sont relativement récents. L'intégration de cette pratique en entreprise conduit à des évolutions diverses, notamment l'extension des tests au delà du simple code, mais au cadre de la conception (BDD).
.
