docAUCUNE DOCUMENTATION PERMISE
download 
Plainte Transcription
AUCUNE DOCUMENTATION PERMISE
IFT1005-A2015
Examen Intra
Design et développement Web
Date:28 octobre 2015, 10:30-12:30
Guy Lapalme
AUCUNE DOCUMENTATION PERMISE
(10) 1. Expliquez ce qu’on entend par balisage sémantique et justifiez son importance.
(10) 2. Dans le cadre de la technologie web, on trouve souvent des fichiers qu’on qualifie avec
leur extension habituelle (xml, rnc ou html). À quoi correspondent ces types de fichiers
et expliquez les relations entre eux.
(20) 3. Dans le fichier HTML ci-haut, indiquez les éléments avec les numéros de ligne correspondant qui sont sélectionnés avec les sélecteurs CSS suivants:
(5)
(a) .c3 a
(5)
(b) #k0 .c1
(5)
(c) .c3:hover
(5)
(d) écrivez une expression CSS permettant la sélection du seul élément p de la ligne
10.
IF1005-A2015
Page 2
(40) 4. XML Soit le fichier XML suivant:
<citations>
<auteur id="allais">
<prenom>Alphonse</prenom><nom>Allais</nom>
</auteur>
<auteur id="allen">
<prenom>Woody</prenom><nom>Allen</nom>
</auteur>
<auteur id="dac">
<prenom>Pierre</prenom><nom>Dac</nom>
</auteur>
<auteur id="kierkegaard">
<prenom>Søren Aabye</prenom><nom>Kierkegaard</nom>
</auteur>
<citation auteur="kierkegaard">
<phrase>.. l’amour ne se trouve que dans la liberté, et ce n’est qu’en
elle qu’il y a de la récréation et de l’amusement éternel.</phrase>
<theme>amour</theme>
<theme>philosophie</theme>
</citation>
<citation auteur="allen">
<phrase>Chez nous c’est moi le <strong>patron</strong>, ma <em>femme</em>
est seulement celle qui prend les décisions.</phrase>
<theme>femme</theme>
<theme>humour</theme>
</citation>
<citation auteur="allais">
<phrase>L’argent aide à supporter la pauvreté.</phrase>
<theme>philosophie</theme>
<theme>humour</theme>
</citation>
<citation auteur="dac">
<phrase>Il vaut mieux chercher anguille sous roche que dans une botte de foin</phra
<theme>humour</theme>
</citation>
<citation auteur="dac">
<phrase><em>Ecouter les autres</em>, c’est encore la meilleure façon
d’entendre ce qu’ils disent.</phrase>
<theme>humour</theme>
<theme>philosophie</theme>
</citation>
</citations>
IF1005-A2015
Page 3
Figure 1: Quelques citations de personnages célèbres.
(20)
(a) Complétez le fichier de validation RelaxNG (forme compacte) suivant
datatypes xsd = "http://www.w3.org/2001/XMLSchema-datatypes"
start = element citations { auteur*, citation* }
pour qu’il puisse valider le document XML présenté plus haut en tenant compte
des contraintes suivantes:
•
•
•
•
(20)
tous le contenus des éléments sont de type text;
les seules possibilités de theme sont: humour, femme, philosophie, amour;
les attributs id des éléments auteur doivent être distincts;
les attributs auteur des éléments citation doivent faire référence à des id
existants.
(b) Écrivez la page HTML et la feuille CSS correspondante qui permettrait de reproduire la présentation de la figure 1 où
• les noms des auteurs sont écrits avec une police de 18pt de hauteur et les
citations de 16pt;
• les citations des auteurs sont séparées par une bordure inférieure bleue avec un
espace de 5pt de chaque côté de la ligne.
(10) 5. Expliquez la notion de push et pull dans le contexte de la diffusion d’information.
Laquelle de ces deux notions s’applique au web ? motivez votre réponse.
(10) 6. Qu’entend-on normalement par accessibilité lorsqu’on parle d’un site web ?
Cet examen comporte 6 questions pour un total de 100 points.
Bonne chance
Rappels RelaxNG compact
Rappels CSS
id = pattern
Sélecteurs
nom
.classe
#id
:pseudo-classe
Sortes de patterns
element nom { pattern }
attribute nom { pattern }
mixed { pattern }
2 patterns combinés avec , ou & ou |
pattern suivi de ? ou * ou +
id
text
nom d’un élément
nom d’une classe
identificateur d’un élément
:link, :hover, :active
Modèle de boı̂te
-top
margin
border
padding
-left
Rappels HTML
-right
contenu
Structure d’une page
-bottom
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link href="..." type="stylesheet"/>
<title>...</title>
</head>
<body>
...
</body>
</html>
Principales propriétés
background-color
background-image
background-repeat
background-position
border
color
display
font
height
margin
padding
position
text-align
top
width
Éléments du body
em,strong
sub,sup
ul
ol
li
div,span
a href="..."
img src="..."
alt="..."
mise en relief
indice, exposant
liste non-ordonnée
liste ordonnée
élément de liste
regroupements d’éléments
lien entre documents
image
Éléments de division HTML5
header
nav
aside
section
article
footer
entête de toute la page
navigation principale
information auxiliaire
contenu de la page
unité d’information autonome
pied de page
1
couleur du fond
url(image )
repeat-x | repeat-y | no-repeat
left | top | center | bottom | right
border-width border-style couleur
spécification de la couleur
inline, block
font-family font-style font-weight
hauteur du bloc
largeur de la marge
largeur du padding
relative | absolute | fixed
left | right | center | justify
position en haut à gauche
largeur du bloc
