http://www.isima.fr/~loic
Mars	2016
1
2
Machine	locale
Navigateur	:	
http://www.isima.fr
Serveur	Web
(Apache,	…) Traitement	de	la	
requête…
3
Technologies	web
• Standards	W3C	?
• HTML	/	XHTML	/	XML
• CSS /	XSLT
• Java	(Applet)
• ECMAScript(Flash,	Javascript)
• S...
Plan
• HTML	
• CSS
• Javascript+	jQuery
• XML
– Validation	:	Schémas
– Présentation	:	CSS	&	XSLT
– Programmation
4
HTML	<	5
6
Hyper	Text	Markup	Language
• Langage	?
• Liens	hyper	texte
• Balises
• Mélange	"subtil"
– Contenu
– Forme
7
HTML
• Compris	par	un	navigateur
– Tous	les	navigateurs	ne	comprennent	pas	la	même	
chose
• Simple
• Léger	en	taille
– P...
8
html
entête corps
paragraphe
image
liste
lien
mise	en	valeur
9
<html>
<head>
<title> Titre </title>
</head>
<body>
un petit contenu
</body>
</html>
• Balise	ouvrante	/	balise	fermante...
10
Simple	mais	ordonné…
• Balise	<html>
– Précédé	éventuellement	par	des	nouvelles	balises	
(doctype	par	ex)
• Entête	<hea...
11
<balise1>
<balise2>
</balise2>
</balise1>
Liste	très	limitée	de	balises,	fermantes	ou	non	!
Insensible	à	la	casse	(minu...
12
Attribut
• Modification,	ajout	sur	une	balise
• Liste	restreinte	dépendante	de	la	balise
• Insensible	à	la	casse	mais	m...
Éditeurs
• WYSIWYG
– Adobe	Dreamweaver
– Front	Page	>	Microsoft	Expression
– Nvu >	KompoZer
– BlueGriffon
– Intégration	av...
14
Les	liens	;-)
• Lien	classique
– target =	_blank,	cadre	….
• Ancre
<a href="page.html">mon lien </a>
<a name="ancre"></...
15
<p>Paragraphe</p>
<p align="left">
<p align="center">
<p align="right">
<p align="justify">
• Balises	de	type	bloc
• <b...
16
Caractères	spéciaux	(1)
• Par	défaut,	les	caractères	accentués	ne	sont	
pas	supportés	par	les	navigateurs
• Solutions
–...
17
Caractères	spéciaux	(2)
&eacute; é &amp; &
&Egrave; È &quot; "
&agrave; à &apos; '
&ecirc; ê &lt; <
&iuml; ï &gt; >
&co...
18
Police
• <font> </font>
• <font color="blue">
• <font size="+2">
• <font size="-2">
• <font face="Courier">
Choisir	une...
19
Gestion	des	"blancs"
• 1	ou	plusieurs	blancs	=	"1	blanc"
• Saut	de	ligne	pas	important
• Espace	insécable	:	&nbsp;
• VR...
20
Organisation	
• Titres
– de	<h1> à	<h6>
• Listes
– non	numérotées	(à	puces)	<ul>
– numérotées	<ol>
– élément	d'une	list...
21
Titres	
• Structuration	du	document
• Organisation	hiérarchique
– Haut	niveau	<h1> …</h1>
– …
– Bas	niveau	<h6> … </h6>...
22
Liste	non	ordonnée
• Changer	la	puce
– Attribut	type
– square,	circle,	disc,	
none
– CSS	:	toute	image
• Balise	bloc
• ...
23
Liste	ordonnée
• Changer	la	numérotation
– Attribut	type :	
A,	a,	I	(i),	i,	1
• Début	de	numérotation
– Attribut	start
...
24
Liste	de	définitions
<dl>
<dt>Mot 1</dt>
<dd>Def 1a</dd>
<dd>Def 1b</dd>
<dt>Mot 2</dt>
<dd>Def 2</dd>
</dl>
Mot 1
défi...
25
Visuels
• <u> </u>
• <b> </b>
• <i> </i>
• <blink> </blink>
<marquee> </marquee>
• <body bgcolor="navajowhite">
Pas	sta...
26
Image
• Images	JPEG,	GIF,	PNG
• Balise	simple	<img>
• Attribut	src
– src="en_construction.gif"
• Attribut	alt
• Attribu...
Commentaire
27
<!–- texte d'explication -->
<!–-
<p>Code non commenté</p>
<p>Commentaire non imbriquable</p>
-->
28
Tableau	(1)
<table>
<tr>
<td> L1C1 </td>
<td> L1C2 </td>
<td> L1C3 </td>
</tr>
<tr>
<td> L2C1 </td>
<td> L2C2 </td>
<td...
29
Tableau	(2)
• height,	width :	px,	em,	%
• Border,	border="0"
• align :	center,	right,	left
• <thead>	<tbody>
• Fusion	d...
30
Balise	TD
valign='top'
align='left'
valign='top'
align='center'
valign='top'
align='right'
valign='middle'
align='left'...
31
Cadres	/	frameset
A	éviter	:	préférer	iframe
iframe
32
• src,	id,	name
• width,	height,	frameborder
33
Formulaires
• Utilité	avec	un	langage	de	script	serveur
– Récupération	des	informations
– Vérification	et	traitement	sp...
<input>
• Type
– text,	password,	hidden
– radio,	checkbox
– submit,	reset,	button,	file
34
<input type="radio" name="a" va...
Vous	êtes	venus	en	:
○ Vélo
○ Tram
○ Voiture
○ À	pied
Quand	?
○ Aujourd’hui	 seulement
●Toute	la	semaine
<form action="mai...
<select>
36
<select name="cours">
<option>C++</option>
<option>C#</option>
<option>Eiffel</option>
<option selected="selec...
Formulaire
37
Nom
Prénom
Courriel
Loïc
Personne
Cours	préféré
C++
Java
HTML
<fieldset>
<legend>
<label>
Le	positionnement
...
38
HTML/XHTML
• Balises	toujours	fermées	et	en	minuscules
<br /> <img /> <hr />
• Attributs	
style="color:black" checked='...
39
Doctype
<!DOCTYPE	HTML	PUBLIC	"-//W3C//DTD	HTML	4.01//EN"	
"http://www.w3.org/TR/html4/strict.dtd">	
<!DOCTYPE	HTML	PUB...
HTML	5	?
• Recommandation	depuis	octobre	2014
• Balises	sémantiques	
– article,	details,	footer,	header,	mark,	section,	su...
AVOIR	DU	STYLE	(CSS)
42
Cascade	Style	Sheets
• Séparer	le	contenu	de	la	forme
– 53	CSS	1	,	120	CSS2	,	115	CSS2.1	,	246	CSS3
• Abolition	des	tab...
43
Visuels	II
• Lié	à	la	sémantique
– <em> </em>
– <strong> </strong>
• Lié	à	la	forme
– <span style="color:red"> </span>
...
Présentation	de	site
44http://www.alsacreations.com/static/gabarits/index.html
Entête
Pied	de	page
Menu
Contenu
Le	Saint	Graal
45
TITRE
PIED	DE	PAGE
NAVIGATION PUB
CONTENU
PRINCIPAL
https://philipwalton.github.io/solved-by-flexbox/dem...
Couleur
• Nom
– 17	+	130
• Rouge Vert	Bleu
• rgb(255,	0,	0)
• rgb(100%,	0,	0)
• #FF0000	ou	#F00
46Tiré	de	http://colorsche...
47
Différents	médias
• Écran	:	screen
• Imprimante	:	print
• Mobile	:	handheld
• Présentation	:	projection
• Braille	:	bra...
48
Exemple
h1 {
font-size : 110%;
color : yellow;
text-align : center;
padding-left : 1em;
}
p {
text-align : justify;
}
E...
49
Avoir	du	style	(1)
1. Fichier	texte	(.css)
2. Balise	<style>	dans	l'entête
3. Attribut	style
<a style="font-weight:bold...
50
Lien	avec	un	fichier	externe
<style type="text/css">
@import url(fic1.css);
@import url(fic2.css) print;
</style>
<link...
51
Entête	de	fichier	HTML
<head>
<style type="text/css">
<!--
p {
text-align : justify;
font-weight : normal;
}
-->
</styl...
52
Classe
<p> texte par défaut </p>
<p class="center"> texte centré </p>
.center { text-align : center; }
a.petit { font-s...
Plusieurs	classes
53
<p class="p1 p2"> texte </a>
<p class="p2 p1"> texte </a>
<p class="p2"> texte </a>
.p1 { text-color ...
54
Identifiant
<div id="entete"> Ent&ecirc;te </div>
<div id="baspage"> copie </div>
#entete { text-align : center; }
#bas...
55
Pseudo	classe	/	Pseudo	élément
• :hover,	:focus
• :link,	:active,	:visited
• :first-letter,	:first-line
• :first-child
...
56
Exemples
a { color : blue; }
#menu a {
color : red;
}
h1, h2, h3 {
color : white;
background-color : blue;
}
/* h4 { fo...
57
Avoir	du	style	(2)
• Par	héritage	du	contenant
• Par	type	de	balise
• Par	classe	d'éléments
• Par	identification	unique...
58
Taille
• Taille	fixe
– point	(pt)	pica	(pc)	
– centimètre	(cm)	millimètre	(mm)	
– pouce	(in)
• Taille	relative
– Cadrat...
59
Police
• font-family
– 'Arial',	'Trebuchet MS‘,		times,	verdana
– Police	google ?
• font-weight
– normal	bold lighter b...
60
Texte
• text-decoration
– underline overline line-through none
• text-transform
– capitalize lowercase uppercase none
•...
61
Espacements
• Interligne
– line-height
• Crénage/interlettrage
– letter-spacing
• Espace	entre	les	mots
– word-spacing
62
Eléments
• En	ligne
– Affichés	au	fil	du	texte
– Pas	de	positionnement	précis	prévu
– Marges	inexistantes
• Type	bloc
–...
63
Elément de	type	bloc
margin
border
padding
contenu
• Occupe	tout	l'espace	disponible	par	défaut
• Les	composants	peuven...
Marges
• Internes	ou	padding
• Externes	ou	margin
• Fusion	des	marges
– Désactivé	si	border	ou	padding ou	positionnement
6...
65
Bordures
• border
– top	/	right	/	
bottom /	left
• border-style
– dashed dotted
double	groove	hidden inset outset ridge...
66
<div><p>Paragraphe de texte</p></div>
1/	Mettre	en	bleu	p	et	en	vert	le	div	…
Paragraphe	de	texte	?
2/	Mettre	une	large...
67
<div>
<p>Premier paragraphe de texte</p>
<p>Second paragraphe de texte</p>
</div>
Premier	paragraphe	de	
texte
Second	p...
68
Positionnement
• Modèle	de	boite
• Sortie	de	flux
– Absolu
– Relatif
– Fixe
– Flottant
• Profondeur
69
Modèle	de	boîte
margin
border
padding
contenu
• Tous	les	composants	ont	des	marges	par	défaut
• Reset	CSS	style
70
Différents	modèles	de	boîte
• Modèle	standard
Largeur	à	l'écran	=
largeur	spécifiée	+	padding	+	border
• Modèle	Microso...
71
Modèle	de	boîte	standard
padding
contenu width
width:100	%	avec	padding ou	border	?
width :	auto;
box-sizing :	content-...
72
Modèle	de	boîte	Microsoft
padding
contenu width
Modèle	par	défaut	(mode	Quirks)
si	la	page	HTML	ne	contient	pas	de	DOCT...
73
Flux	normal
• Ordre	dans	lequel	apparaissent	les	éléments
• Blocs	
– les	uns	sous	les	autres
– utilisent	toute	la	large...
74
Positionnement	relatif
• Élément	placé	dans	le	flux	normal
• Décalé	ensuite	grâce	à	
– top,	right,	bottom,	left
• Pas	d...
Troisième	paragraphe
de		texte
75
#deuze{
…
position	:	relative;
bottom :	1em;
left:	 1em;
}
Premier	paragraphe	de	
texte
...
76
Positionnement	absolu
• Sortie	du	flux	complète
– top,	right,	bottom,	left
• Positionnement	par	rapport
– Au	parent	s'i...
77
Entête
Pied	de	page
Menu
Contenu
Aucun	conteneur	positionné	=>
Position	absolue	
par	rapport	au	body
Entête
Pied	de	pag...
78
<div>
<p id="prem">Premier paragraphe de texte</p>
<p id="second">Second paragraphe de texte</p>
</div>
p { margin : 0;...
79
#second {
position : absolute;
height : 50px;
top : 0;
left:0;
}
80
#second {
right:0;
}
Solution	?	 Positionner	le	div	englobant	(relative)
81
Positionnement	fixe
• L'élément	ne	défile	plus	avec	la	page
• FF	ou	IE7+
position : fixed
Menu	
fixe
82
Positionnement	flottant
• Bloc	retiré	du	flux	pour	être	placé	à	gauche	ou	
à	droite	du	bloc	qui	le	contient
• Sa	place	...
83
Texte	"long"	sur	#second
float:right sur	premier
84
float :	left sur	premier	et	second	à	largeur	fixée
• Que	se	passe	t'il	si	la	hauteur	du	div	est	petite	(20px)	?
• Compo...
Profondeur
• Élément	de	type	bloc
• Comportement	par	défaut
– Dernier	élément	affiché	au	dessus	des	autres
• Propriété	z-i...
Reset	sheet
• Marges/Ratios	différents	suivant	les	navigateurs
• Mieux	: harmoniser	certains	éléments
– Yahoo	UI
– Eric Me...
Sélecteurs	(1)
• Balise,	identifiant,	classe
• Plusieurs	éléments
• Hiérarchie	souple
• Héritier	direct
87
p > a {
text-de...
Sélection	ou	pas	?
88
<div><a> lien 1 </p></div>
<a><p> lien 2 </p></a>
<p><a> lien 3 </a></p>
<p><a><b> lien 4 </b></a></...
Sélecteurs	(2)
• Élément	frères
• Attributs
89
p + p { … }
p[class] { … }
img[class="preview"][width="100"] { … }
[title] ...
Priorité	CSS/sélecteurs
1. *,	>,	+
2. Sélecteur	élément	ou	pseudo-élément
3. Sélecteur	classe,	attribut	ou	pseudo-classe
4...
91
Listes
• list-style-type
– none,	disc,	circle,	square
– decimal,	lower-alpha	(a),	lower-roman	(i),	upper-alpha	(A),	
up...
Positionnement	avancé
• CSS	2	voire	2.1
• Support	partiel	
– Dégradation	gracieuse	?
– Hacks
– Feuilles	de	style	condition...
display	:	inline-block
• Inline
– Éléments	les	uns	à	côté	des	autres
• Block
– Dimensions	:	width et	height
• Reste	dans	l...
Bogue	des	espaces
94
Tableau	(1)
• Permet	d'afficher	sous	forme	de	tableaux	tout	
élément
• SANS	perte	de	sémantique
• Display	
– table,	table-...
Tableau	(2)
96
<div id="header"></div>
<div id="main">
<div id="lmenu" > </div>
<div id="content"> </div>
<div id="rmenu" ...
Outils	d’aide
• Extensions
– Firebug (FF	/	Chrome)
– Web	Developer(FF	/	Chrome)
– MS	IE	DeveloperToolbar
• Scripts	de	vali...
Formulaire
98
Nom
Prénom
Courriel
Loïc
Personne
Cours	préféré
C++
Java
HTML
<fieldset>
<legend>
<label>
Couleur	spécifique...
Menu
99
• Menu	1
• Menu	2
• Menu	3
• Menu	4
Menu	1
Menu	2
Menu	3
Menu	4
Menu	1 Menu	2 Menu	3 Menu	4
Menu	1 Menu	2 Menu	3 M...
CV
100
CSS	3
• Ensemble	de	modules	
– Stades	différents	de	recommandation
• Compatibilité	entre	navigateurs	?
• Sélecteurs
• Bord...
XML
103
eXtensible	Markup	Language
• Langage	générique	qui	permet	d'écrire	des	langages	
à	balises
– XHTML
– MathML
– SVG
• XM...
104
SGML
• Standard	Generalized	Markup	Language
• Créé	en	1986	;-)
• Séparation	forme/contenu
• Trop	complexe	?
105
Fichier	XML
• Fichier	texte,	plat	?
– Règles	d'écriture	précises
– Document	bien	formé
• Structure	arborescente	
– Sys...
106
<collection>
<serie nom="Trolls de Troy">
<bd>
<titre tome="1">histoires trolles</titre>
<auteur>Arleston</auteur>
<de...
107
108
Type	de	nœud	(1)
• Texte
– Non	vide
– Feuille	dans	l'arbre
• Élément
– Nom
– Groupe	logique
• Attribut
– A	pour	parent...
109
Type	de	nœud	(2)
• Commentaire
• Instructions	de	traitement	– processing node
– Cible	+	valeur
• Racine
– Représente	l...
110
Arbre	XML
Collection
Série Série Série
bd bd bd bd bd
Racine
Feuille
Enfants	ou	contenu
Descendants
Ascendants
Frères
111
Document	bien	formé
• Syntaxiquement	correct
• Respect	de	la	structure	arborescente
• Respect	du	nom	des	balises	(cass...
Clauses	supplémentaires
• Entête
– UTF-8,	UTF-16,	ISO-8859-1
– Échapper	les	caractères	:	&amp;	©
• Style
• DTD	+	attribut	...
113
<bd>
<titre tome="1">histoires trolles</titre>
<auteur>Arleston</auteur>
<dessin>Mourier</dessin>
<comment>
<head>
<ti...
114
Espace	de	nommage	(2)
<collection xmlns="http://www.kiux.net">
…
<comment
xmlns:xhtml="http://www.w3.org/TR/xhtml11">
...
Validation
• Est-ce	que	le	fichier	XML	suit	des	règles	précises	?
– Présence	/	ordre	des	éléments
– Attributs
– Valeurs	po...
116
DTD	&	élements
<!ELEMENT A (B)>
<!ELEMENT A (B, C)>
<!ELEMENT A (C, B)>
<!ELEMENT A (B | C) >
<!ELEMENT A (B, (C | D),...
117
DTD	&	attributs
<!ATTLIST A
a CDATA #IMPLIED
b CDATA #IMPLIED >
<!ATTLIST A a CDATA #IMPLIED >
<!ATTLIST A b CDATA #IM...
118
<collection>
<serie nom="Trolls de Troy">
<bd>
<titre tome="1">histoires trolles</titre>
<auteur>Arleston</auteur>
<de...
Lier	données	et	DTD
• DTD	interne
• DTD	externe
119
<!DOCTYPE racine [
<!ELEMENT nom (#PCDATA) >
<!-- ... -->
]>
<!DOCTYPE...
XML	Schéma
• Alternative	XML	de	la	DTD
– Outils	classiques	(parseur,	XSLT)
– Non	figé
– Plus	puissant
• Norme	extensible	s...
121
<?xml version="1.0"?>
<xs:schema
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="note">
<xs:complexType...
Lier	XML	et	schéma
122
<?xml version="1.0"?>
<note xmlns="http://www.w3schools.com"
xmlns:xsi="http://www.w3.org/2001/XMLS...
Élément	simple
• Qui	ne	contient	pas	d'autre	élément	ou	d'attribut
• Prédéfini
– string,	decimal,	integer,	long,	boolean,	...
Exemples	de	Facettes
124
<xs:restriction base="xs:string">
<xs:enumeration value="velo"/>
<xs:enumeration value="pied"/>
<...
Élément	complexe	(1)
• Vide
• Texte	seulement
• Autres	éléments
• Texte	et	autres
125
Avec	ou	sans	attribut(s)
<xs:element...
Élément	complexe	(2)
• Vide
– Il	suffit	de	lister	les	attributs	si	besoin
• Texte	seulement	(avec	extension	ou	restriction...
Éléments	complexes	(3)
• L'ordre	ne	compte	pas
• Les	éléments	apparaissent	0	ou	1	fois
• Un	des	éléments
• Éléments	dans	l...
Attribut
• Comme	un	élément	simple
• A	placer	après	les	éléments	complexes
• Optionnel
– use :	optional /required (par	déf...
129
XPATH
• Langage	pour	naviguer	dans	le	document
– 1.0	et	2.0	(2007)
– Sous-ensemble	commun	de	XSLT	et	XQuery
• Fonction...
130
Étape	de	localisation	– axe
• child	
– sauf	attributs
– par	défaut
• descendant
• parent	(unique)
• ancestor
• followi...
Exemples
131
n1
/n0
/n0/n1
//n1
n0//n1
//@lang
n0/n1 [1]
/n0/n1 [last()]
/n0/n1[@lang]
/n0/n1[@lang="fr"]
/bib/livre[prix>...
Présentation
• CSS
• XSLT	1.0	&	2.0
132
133
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="comics.css"?>
<collection>
<serie n...
134
serie {
display :block;
background-color:#1111FF;
padding : 0.25em;
margin:0.5em;
}
bd {
display : block;
background-c...
135
XSLT
• Langage	de	transformation
– D'un	arbre	XML	vers	un	autre
– Si	transfo	en	HTML,	c'est	du	XHTML	;-)
• 2	versions	...
136
Lien	données/fichier	XSL
<?xml-stylesheet type="text/xsl" href="comics.xsl"?>
<?xml version="1.0" encoding="ISO-8859-1...
137
Patrons	/	templates
• Appliquer	un	traitement	à	des	nœuds	particuliers	
(XPath)
<xsl:template match="/">
…
<xsl:value-...
138
Patrons	nommés
<xsl:template name="filtering">
<xsl:param name="filter" select="'none'"/>
…
</xsl:template>
<xsl:call-...
139
Tris
<xsl:for-each
select="//bd" order-by="+parution">
…
</xsl:for-each>
//	order facultatif,	- permet	changer	de	sens...
140
Filtres	et	conditions	(1)
<xsl:for-each select="//bd[@tome=1]">
…
</xsl:for-each>
Opérateurs	:	=			!=			&LT&			&GT&
<x...
141
Filtres	et	conditions	(2)
<xls:choose>
<xsl:when match="…">
…
</xsl:when>
<xsl:when match="…">
…
</xsl:when>
<xsl:othe...
142
Variables
<xsl:variable name="chemin1"
select="document('biblio.xml')/biblio/*"/>
<xsl:value-of select="count($chemin1...
143
Modification	de	l'arbre	XML
<xsl:element>
<xsl:attribute>
<xsl:comment>
<xsl:processing-instruction>
<xsl:text>
<xsl:c...
XML	ET	PROGRAMMATION
145
XML	et	programmation
• Simple	fichier	texte	(unicode)
• Format	spécial
– Analyse	des	documents	et	transformation	en	
a...
146
Technologies
• Modèle	DOM
– Chargement	complet	en	mémoire
– DOM,	JDOM,	DOM4J
• SAX
– "Streaming",	pas	de	stockage
– Ap...
147
Document	Object	Model
• Recommandation	du	W3C
• Indépendant	du	langage	de	programmation
• Support
– Arbre	XML
– XPath,...
148
JDOM
• Moins	générique	que	DOM
• Pas	d'analyseur	fourni
– utiliser	DOM	ou	SAX
• Java	avec	collection	
• Structures
– P...
149
Quelques	classes/méthodes
• Document
– getDescendants()
• Element
– getContents(), get/setAttribute(),
addContent()
• ...
150
import org.jdom.*;
import org.jdom.input.*;
try {
SAXBuilder b = new SAXBuilder();
b.setValidation(true); // verificat...
151
org.jdom, org.jdom.input, org.jom.ouput,
org.jdom.transform, javax.xml.transform
try {
SAXBuilder b = new SAXBuilder()...
152
Simple	API	for	XML
• Pas	de	stockage	en	mémoire	comme	les	autres
– Lecture	en	le	moins	de	passes	possibles
• SAX	:	rec...
153
Evénements
• Début	du	document
• Balise	de	début
• Balise	de	fin
• Déclaration	d'espace	de	nommage
• Espaces	lus
• Don...
154
public class XMLSAXProject extends DefaultHandler {
public void startDocument() {}
public void endDocument() {}
public...
JAXB
155
156
XStream
• Initialiser
• Utiliser	des	alias
• Sérialiser
• Désérialiser
XStream xstream = new XStream();
xstream.alias(...
157
FileOutputStream fos = null;
XStream xstream = null;
try {
fos = new FileOutputStream(name);
xstream = new XStream();
...
JAVASCRIPT (ECMASCRIPT)
158
javascript
– Langage	objet	à	prototype,	interprété	et		typage	
dynamique,	syntaxe	C-like
– Mais	aussi	:	procédural,	récurs...
Inconvénients	?
• Modification	du	DOM
• Compatibilité	/	prise	en	charge	des	navigateurs
– Que	voit	l'utilisateur	?
– Lynx	...
Insertion	?
• Où	?
– Code	dans	l'entête
– Code	dans	la	page	Ouaib
– Code	dans	un	fichier	extérieur
• Élément	utilisable	dè...
Afficher	une	boite	de	dialogue
162
<script type="text/javascript">
<!--
alert("un chtit message!");
// -->
</script> <scri...
Écrire	sur	la	page
163
<script type="text/javascript">
var prenom = "loic";
document.write("<p>");
document.write(prenom);...
Fonction
164
<script type="text/javascript">
function debogage(texte) {
alert("le lien "+texte);
// return false;
}
</scri...
Portée	/	scope	des	variables
165
<script type="text/javascript">
v1 = "essai";
var v2 = 10;
function portee(texte) {
var v...
Fonction	anonyme
166
var rigolo = function () {
…
};
rigolo();
(function () {
})();
Exécution	immédiate
Création	d'un	espa...
Objets
• Prédéfinis
– Date,	String,	Number,	Boolean,	Error,	RegExp
– Array
– DOM
• document
• window
• Personnels
167
var ...
Objet
168
function Classe() {
this.att1 = "0";
this.att2 = 12;
this.aff = afficher;
this.mod = function(a,b) {};
}
var o2 ...
Héritage	par	prototype
169
function Mere(nom) {
this.nom = nom;
}
function Fille(nom, prenom) {
Mere.call(this, nom);
this...
Closure /	fermeture
170
function f(a) {
var b = 3;
var self = this;
var g = function() {
b ?
this ?
}
return g;
}
https://...
Tableau	usuel
171
var tab = new Array();
tab[0] = "zero";
tab[1] = "un";
tab[2] = 2;
tab.push("trois");
var tab2 = [3.14, ...
Tableau	associatif
172
var tab = new Array(); /* Object */
tab["un"] = 1;
tab["deux"] = 2;
tab.trois = 3;
var tab2 = { "un...
Document	Object	Model
• Standard	W3C	(Level 3)
• Modèle	universel	pour	gérer	et	accéder	à	un	
document
– HTML	/	XHTML	/	XM...
174
DOM	:	getElementById()
175
<script type="text/javascript">
function apparait() {
document.getElementById('rep1')
.style.di...
DOM	:	getElementsByTagName()
176
<script type="text/javascript">
function changeP() {
var blocs =
document.getElementsByTa...
DOM	:	sur	les	nœuds
177
var d = document;
var b = d.getElementsByTagName("body")[0];
var p = d.createElement("p");
var t =...
Validation	formulaire
178
<form name="formu" id="form1"
action="…" method="post"
onsubmit="javascript:return valider();" >...
Événements
• Décrits	par	le	DOM
• Support	des	Listeners
• Gestion	de	la	propagation
– Capture	/	Cible	/	Bubbling
• Synchro...
Propagation	
des	événements
180
https://w3c.github.io/uievents/
Quelques	événements
• click
• dblclick
• mouseover
• mouseout
• mousedown
• mouseup
• mousemove
• keydown /	keyup
• keypre...
Gérer	les	événements
• Attribut	sur	balise
• Propriété	d'un	élément
182
<a href="…" onclick="…;return false;">
<p onmouseo...
Console	/	Débogueur
• intégrés
– IE	9+	(F12),	Chrome,	Opera (?)
• avec	extension
– FF	(Firebug)
183
<script type="text/jav...
"Et	pis	c'est	tout	!"
• Navigateur
– Détection
• Cookies
• Informations	documents
– Date	de	mise	à	jour,	url
• Temps,	Anim...
Construire	un	menu
185
<h1>Titre
Menu
<ol>
Contenu
<h2>
<h3>
A	construire	
dynamiquement
ECMAscript 6	ou	JS	2015
• En	cours	d'implémentation	par	les	navigateurs
• Objet	=	"sucre	syntaxique"
• Typescript (MS)
• T...
jQUERY
187
jQuery ?
• Framework	Javascript
– Portable
– Apporte	la	compatibilité	(sélecteurs	et	IE6)
• Plugins
• Projet	:	Core,	UI,	Q...
$(function() {
/* code */
});
jQuery !
• Sélecteurs
– Utilisation	des	fonctions	anonymes
• Événements	/	Animations
• Opéra...
Inclusion
• Version	de	production	"minified"	
• Nombreux	greffons
• Récupération	
– Google/MS/Yahoo
• Mise	en	cache
• Allè...
jQuery ?
• Objet	
– Utilitaires
• Méthode
– Opérations	sur	des	éléments
– Renvoie	un	objet
– Chainable
• Mode	non	conflit	...
Utilitaires
• Type	:	$.isArray()	isFunction()	isEmptyObject()…
• Sérialisation	:	$.param()
• $.browser
– .mozilla .msie .o...
Utilitaires	tableaux
• Parcours	:	$.each()
• Filtre	et	sélection	:	$.grep()	$.inArray()
• Nouveau	tableau		:	$.map()	$.mak...
Sélecteurs	(1)
• Sélection	d'élément(s)	=>	sélecteur	CSS
• Mise	en	bouche	de	CSS	3	(p+n)
• Sélecteurs	propres	(p	~	s)
194
...
Sélecteurs	(2)
• [attr],		[attr^=],	[attr$=]
• Pas	d'attribut	ou	pas	la	valeur
• :contains(texte)	
• :has(selecteur),	:not...
Parcourir
• .add()
• .each(),	.map(fonction)
• .is(),	.filter();	.get()
• .parent()
• .next()
• .prev()
• .children()
• .f...
DOM
• hasClass()
• addClass()	/	removeClass()	/	toggleClass()
• css(clé,	valeur)
• append(),	prepend()
• html()	/	val()	/	...
Animations
• slideUp()	/	slideDown()	/	slideToggle()
• fadeIn()	/	fadeOut()	/	fadeTo()	/	fadeToggle()
• show()	/	hide()	/	...
Événements	:	click
• Lier	élément	et	un	événement
• Lancer	(trigger)	un	événement
• return	true/false	ou	preventDefault()
...
Exemple	:	surbrillance
200
$('p:contains('+s+')')
.each(function(){
var reg = new RegExp(s, "g");
$(this).html(
$(this).ht...
• Tester	avec	un	chaine	simple
– Ajouter	la	classe	hilite en	CSS
– Le	document	doit	être	chargé
• Mettre	un	petit	formulai...
Le	retour	du	menu
202
<h1>Titre
Contenu
<h2>
<h3>
Menu
<ol>
A	construire	
dynamiquement
Affichage	
"sympa"
JSON
• JavaScript	Object	Notation
• Alternative	au	XML
– Rapide	et	natif	(eval())
– Plus	léger	/	moins	verbeux
– Standard,...
204
{
"prenom": "ISIMA",
"nom" : "ZZ",
"age" : 23,
"adresse" : {
"rue": "1 rue de la Chebarde",
"comp": "TSA 60125 – CS 60...
AJAX
• AsynchronousJavascriptAnd		XML
• Communication	client-serveur	sans	recharger	une	
page	complète
• XMLHttpRequest()
...
Fichier	source	texte
206
<?php
header("Content-Type:text/html");
$rep = "";
$rep = utf8_encode($txt)
echo $rep;
?>
<% @pag...
Fichier	source	XML
207
<?php
header("Content-Type:text/xml");
$rep = "";
$rep = utf8_encode($txt)
echo $rep;
?>
.php
Fichier	source	JSON
208
<?php
header("Content-Type:application/json");
$rep = "";
$rep = utf8_encode($txt)
echo $rep;
?>
j...
Code	client
209
function texte() {
$.ajax({
url : "html.php",
complete : function (xhr, result) {
if (result!= "success") ...
Validation	formulaire
210
http://speckyboy.com/2009/12/17/
10-useful-jquery-form-validation-techniques-and-tutorials-2/
jQuery UI
• Interactions
– Drag	&	drop,	tableaux
• Widgets
• Effets
• Thèmes
211
HTML	5	/	CSS	3
212
HTML	5	/	XHTML	5
• Simplification
• Nouvelles	balises	sémantiques
• Support	des	navigateurs	!	Et	avis	divergents
• http://...
Syntaxe	permissive	et	simplifiée
• Simplification
• <html><head><body>
<thead><tfoot><tbody>	optionnelles
• <p><li><tr><td...
Nouvelles	balises	(sémantiques)
• <header>
• <footer>
• <nav>
• <aside>
• <section>
• <article>
• <figure>
• <figcaption>
...
216
<header>
<aside>
<footer>
<nav>
<section>
<article>
<header><h1><div>
<aside>
<section>
<article>
<header><h1><div>
<a...
Utilisation
• Pas	reconnues	par	tous
– Voire	pas	affichées	du	tout	(IE	8)
– Pas	de	sens	(moteurs	de	recherche)
– Sécurité	...
Audio
• Options	:	autoplay et	controls
• Formats	:	mp3,	ogg,	wav
– mp3	:	ie9,	Chrome,		Safari
– wav :	FF,	Safari,	Opera
21...
Video
• Options	:	autoplay,controls,	preload,	loop,	poster
• Formats	:	h264	(mp4),	ogv,	webM
– H264	:	IE9,	Safari,	Opera
–...
220
Canvas (1)
<canvas id="dessin" width="640" height="400">
Ici, quelque chose que le navigateur ne peut afficher
</canva...
Canvas (2)
221
<script>
gc.fillStyle = "red";
gc.arc(0,0, 200, 0, Math.PI*2, true);
gc.fill();
gc.shadowBlur = 50;
gc.shad...
222
http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
223
Formulaire
• datalist
• keygen
• meter
• progress
• output
• color
• date	time
• month week
• datetime[-local]
• email
• n...
input	type="email"
225
input:valid {
border : 1px solid green;
border-right: 8px solid green;
}
input:invalid {
border : 1...
progress
226
<progress id="p" value="0" max="200">
</progress>
<body onload="timer()">
function timer() {
var c = document...
Drag	&	drop
• Attribut		:	draggable true/false
• Transfert	de	données
– setData()	getData()	effectAllowed dropEffect
• Nou...
228
<div id="gauche" ondrop="drop(this, event)"
ondragover="return false">
<div id="data1" draggable="true"
ondragstart="d...
Mémoire
• Cookie	?
• sessionStorage
– Un	site,	même	fenêtre
• localStorage
– Plusieurs	sessions
• Javascript/	JSON
• setIt...
TO	DO	list
230
Choses	à	faire	:
• Html5
• Css 3
• javascript
Nouveau	…… Ajouter
HTML :
<ul contenteditable="true">
Effacer...
Et	encore	?
• Nouveaux	éléments	de	formulaire
• Géolocalisation
• Web	hors	ligne
• Drag	&	drop	
• Web	socket	&	web	workers...
CSS	2.0	ou	2.1	
• min-width max-width min-heightmax-height
• :before :after
232
li { display : inline; }
li + li:before {
...
CSS	3
• Rôle	plus	important	pour	attr et	content
• Nouvelles	propriétés	/	nouveaux	sélecteurs
• :pseudo-classe
• ::pseudo-...
Support	des	nouveautés	?
Préfixes	propriétaires
234
p {
-webkit-border-radius : 15px;
-moz-border-radius : 15px;
-khtml-bo...
Propriétés	(contenu)
• word-wrap:normal,	break-word
• overflow:	hidden,	scroll,	auto
• overflow-x	(ou	y)	:	visible,	auto	(...
Propriétés	(décoratives)
• @font-face
• border-radius
• opacityou	rgba(255,	0,	0,	0.5)
• box-shadow
• text-shadow
• border...
Nouveaux	sélecteurs	(1)
• attribut^="commence"
• attribut$="finit"
• attribut*="contient"
• input[type="url"]
• a[href^="m...
Nouveaux	sélecteurs	(2)
• :lang(fr)
– sélectionner	un	contenu	sur	la	langue
– hérité	(hack)
• :empty
• :root =	html	mais	a...
Nouveaux	sélecteurs	(3)
• :last-child
• :nth-child()
• :nth-of-type()
• :only-child
• :only-of-type
• :first-of-type()	/	:...
Nouveaux	sélecteurs	(4)
• :enabled
• :disabled
• :checked
• :required
• :optional
240
Nouvelles	unités
• rem	:	root em
– Taille	par	rapport	à	la	balise	html
– IE	9	+
• vh :	viewport height /	100
• vw :	viewpo...
calc(	)
242
h1 {
width : 100 %;
padding : 1em;
}
h1 {
width : 90 %;
width : calc(100% - 2em );
padding : 1em;
}
Les	espace...
Variables
• Nouveau	module
– Déjà	présentes	dans	Sass /	Less /	…
– Support	très	limité	(No	MS	ni	Android)
• Validité	par	é...
Media	queries
• [min-/max-]width /	height
• Orientation
• Only pour	compatibilité
• Adapter	le	nombre	de	colonnes	suivant	...
Responsive	Web	Design
• Ethan	Marcotte
1. Mobile	First
2. Dégradation	harmonieuse
• Grille	fluide
• Images	flexibles
• Med...
Transformations
• Zoom		:	scale(0.5)	scale(2)	scale(-1)
• Rotation	:	rotate(45deg)	rotate(1.5rad)
• Perspective	:	skew(10d...
Transitions
• Passage	d'une	propriété	CSS	à	une	autre
– Lors	d'un	événement	 (Javascript)
– Avec	une	pseudo	classe	:hover
...
Hack	IE6-IE9	/	Polyfill
• modernizr
• css3pie.com
248
background:
-moz-linear-gradient(#D3DAE9, #576E94);
background:
line...
Et	encore	?
• Animations
– Images	clés
• css3please.com
• css3generator.com
• caniuse.com
249
Amusez-vous	bien	….
• Framework
– [Twitter]	Boostrap
– Boilerplate (Initializr)
– pureCSS.io (yahoo)
• Javascript
– Modern...
Accessibilité
• Norme	:	WAI-ARIA	
• Points	de	contrôle	
• Rôles
251
Et	maintenant	?
• Composants	Web
• Flexbox
• Web	sémantique
(Web	3.0)
252
Source	:	http://www.commitstrip.com/fr/2014/02/1...
253
254
Bibliographie	(1)
• CSS2	Pratique	du	design	web,	2ème éd,	R	Goetter,	Eyrolles,	
2005
• CSS	avancées.	Vers	HTML	5	et	CS...
255
Bibliographie	(2)
• http://openweb.eu.org
• http://www.w3school.com
• http://css.alsacreations.com
• http://www.gchagn...
Prochain SlideShare
Chargement dans…5
×

Web - ISIMA

362 vues

Publié le

Ce cours reprend le web de ses origines (HTML, CSS) aux dernières normes HTML 5 / CSS3. On y voit aussi du Vanilla JS et du JQuery avec une pincée de XML et de JSON. Tout pour le client quoi ...

Publié dans : Formation
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
362
Sur SlideShare
0
Issues des intégrations
0
Intégrations
7
Actions
Partages
0
Téléchargements
9
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Web - ISIMA

  1. 1. http://www.isima.fr/~loic Mars 2016 1
  2. 2. 2 Machine locale Navigateur : http://www.isima.fr Serveur Web (Apache, …) Traitement de la requête…
  3. 3. 3 Technologies web • Standards W3C ? • HTML / XHTML / XML • CSS / XSLT • Java (Applet) • ECMAScript(Flash, Javascript) • SCRIPTS CGI, ASP, PHP, JSP, ruby… • Base de données ?
  4. 4. Plan • HTML • CSS • Javascript+ jQuery • XML – Validation : Schémas – Présentation : CSS & XSLT – Programmation 4
  5. 5. HTML &lt; 5
  6. 6. 6 Hyper Text Markup Language • Langage ? • Liens hyper texte • Balises • Mélange "subtil" – Contenu – Forme
  7. 7. 7 HTML • Compris par un navigateur – Tous les navigateurs ne comprennent pas la même chose • Simple • Léger en taille – PDF ? – WORD ?
  8. 8. 8 html entête corps paragraphe image liste lien mise en valeur
  9. 9. 9 <html> <head> <title> Titre </title> </head> <body> un petit contenu </body> </html> • Balise ouvrante / balise fermante • Les navigateurs acceptent souvent du code mal écrit !!! • Mais pas les outils de validation Un code tout simple…
  10. 10. 10 Simple mais ordonné… • Balise <html> – Précédé éventuellement par des nouvelles balises (doctype par ex) • Entête <head> – Informations sur la page – Titre, jeu de caractères, style • Corps <body> – Contenu de la page exclusivement
  11. 11. 11 <balise1> <balise2> </balise2> </balise1> Liste très limitée de balises, fermantes ou non ! Insensible à la casse (minuscules conseillées) Des balises en ordre ! <balise1> <balise2> </balise1> </balise2> <balise_simple>
  12. 12. 12 Attribut • Modification, ajout sur une balise • Liste restreinte dépendante de la balise • Insensible à la casse mais minuscules conseillées attribut="valeur" attribut='valeur' attribut=valeur attribut OFFICIEL A EVITER <p id="titre" style="color:red">ROUGE</p>
  13. 13. Éditeurs • WYSIWYG – Adobe Dreamweaver – Front Page > Microsoft Expression – Nvu > KompoZer – BlueGriffon – Intégration avec d’autres langages ? • Un simple éditeur de fichier ? – Coloration syntaxique – Code source ? 13
  14. 14. 14 Les liens ;-) • Lien classique – target = _blank, cadre …. • Ancre <a href="page.html">mon lien </a> <a name="ancre"></a> <balise id="ancre">…</balise> <a href="#ancre">vers l'ancre</a> <a href="page.html#ancre"> … </a>
  15. 15. 15 <p>Paragraphe</p> <p align="left"> <p align="center"> <p align="right"> <p align="justify"> • Balises de type bloc • <br> : saut de ligne
  16. 16. 16 Caractères spéciaux (1) • Par défaut, les caractères accentués ne sont pas supportés par les navigateurs • Solutions – Utiliser des "entités" – Ajouter une balise dans l'entête : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  17. 17. 17 Caractères spéciaux (2) &eacute; é &amp; & &Egrave; È &quot; " &agrave; à &apos; ' &ecirc; ê &lt; < &iuml; ï &gt; > &copy; © Liste non exhaustive…
  18. 18. 18 Police • <font> </font> • <font color="blue"> • <font size="+2"> • <font size="-2"> • <font face="Courier"> Choisir une police par défaut ou une liste de polices : essayer de prendre des polices qui existent sur les différents systèmes d'exploitation
  19. 19. 19 Gestion des "blancs" • 1 ou plusieurs blancs = "1 blanc" • Saut de ligne pas important • Espace insécable : &nbsp; • VRAI retour à la ligne : <br> • Paragraphe vide <p> &nbsp; </p>
  20. 20. 20 Organisation • Titres – de <h1> à <h6> • Listes – non numérotées (à puces) <ul> – numérotées <ol> – élément d'une liste <li> – listes imbriquables • Liste de définition <dl> – titre <dt> – description <dd>
  21. 21. 21 Titres • Structuration du document • Organisation hiérarchique – Haut niveau <h1> …</h1> – … – Bas niveau <h6> … </h6> • Balises de type bloc Occupe toute la largeur disponible
  22. 22. 22 Liste non ordonnée • Changer la puce – Attribut type – square, circle, disc, none – CSS : toute image • Balise bloc • Utilisation CSS – menus <ul> <li> … </li> <li> … </li> <li> … </li> </ul> • puce 1 • puce 2 • puce 3
  23. 23. 23 Liste ordonnée • Changer la numérotation – Attribut type : A, a, I (i), i, 1 • Début de numérotation – Attribut start <ol> <li> … </li> <li> … </li> <li> … </li> </ol> 1. puce 1 2. puce 2 3. puce 3
  24. 24. 24 Liste de définitions <dl> <dt>Mot 1</dt> <dd>Def 1a</dd> <dd>Def 1b</dd> <dt>Mot 2</dt> <dd>Def 2</dd> </dl> Mot 1 définition 1a définition 1b Mot 2 définition 2
  25. 25. 25 Visuels • <u> </u> • <b> </b> • <i> </i> • <blink> </blink> <marquee> </marquee> • <body bgcolor="navajowhite"> Pas standards !
  26. 26. 26 Image • Images JPEG, GIF, PNG • Balise simple <img> • Attribut src – src="en_construction.gif" • Attribut alt • Attribut title
  27. 27. Commentaire 27 <!–- texte d'explication --> <!–- <p>Code non commenté</p> <p>Commentaire non imbriquable</p> -->
  28. 28. 28 Tableau (1) <table> <tr> <td> L1C1 </td> <td> L1C2 </td> <td> L1C3 </td> </tr> <tr> <td> L2C1 </td> <td> L2C2 </td> <td> L2C3 </td> </tr> </table> L1C1 L1C2 L1C3 L2C1 L2C2 L2C3
  29. 29. 29 Tableau (2) • height, width : px, em, % • Border, border="0" • align : center, right, left • <thead> <tbody> • Fusion de lignes ou de colonnes
  30. 30. 30 Balise TD valign='top' align='left' valign='top' align='center' valign='top' align='right' valign='middle' align='left' valign='middle' align='center' valign='middle' align='right' valign='bottom' align='left' valign='bottom' align='center' valign='bottom' align='right'
  31. 31. 31 Cadres / frameset A éviter : préférer iframe
  32. 32. iframe 32 • src, id, name • width, height, frameborder
  33. 33. 33 Formulaires • Utilité avec un langage de script serveur – Récupération des informations – Vérification et traitement spécifique • Contrôle navigateur par javascript • <form> : name, action, method • <input> : type • <textarea> : name rows cols • <select> <option> • <fieldset> <legend> <label>
  34. 34. <input> • Type – text, password, hidden – radio, checkbox – submit, reset, button, file 34 <input type="radio" name="a" value="v1"> <input type="radio" name="a" value="v2"> checked="checked" <input name="texte" type="text" size="10" value="essai"> <input type="submit" > <label for="velo">velo</label> id
  35. 35. Vous êtes venus en : ○ Vélo ○ Tram ○ Voiture ○ À pied Quand ? ○ Aujourd’hui seulement ●Toute la semaine <form action="mailto:l@h"> <p>Vous êtes venus en :</p> <input …>Vélo<br> <input …> Tram<br> <input …> Voiture<br> <input …> &Agrave; pied <p>Quand</p> <input …>Aujourd’hui<br> <input …>Toute la semaine <input type="submit"> </form> 35 Envoyer Même nom name = "locomotion" Autre nom name = "quand"
  36. 36. <select> 36 <select name="cours"> <option>C++</option> <option>C#</option> <option>Eiffel</option> <option selected="selected">Java</option> <option>Objective C</option> <option>Smalltalk</option> </select> multiple size size="3"
  37. 37. Formulaire 37 Nom Prénom Courriel Loïc Personne Cours préféré C++ Java HTML <fieldset> <legend> <label> Le positionnement sera vu plus tard
  38. 38. 38 HTML/XHTML • Balises toujours fermées et en minuscules <br /> <img /> <hr /> • Attributs style="color:black" checked='checked' • Préambule de documents • Meilleure séparation contenu/présentation – Balises obsolètes : <font>, visuelles – Attributs obsolètes – CSS
  39. 39. 39 Doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <!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">
  40. 40. HTML 5 ? • Recommandation depuis octobre 2014 • Balises sémantiques – article, details, footer, header, mark, section, summary • Média – audio, video, embed • Autres – Canvas (dessin avec ECMAScript) – Éléments de formulaire et de contrôle – Stockage de données (local ou session) 40 Non supporté par les lecteurs de mail : old school power
  41. 41. AVOIR DU STYLE (CSS)
  42. 42. 42 Cascade Style Sheets • Séparer le contenu de la forme – 53 CSS 1 , 120 CSS2 , 115 CSS2.1 , 246 CSS3 • Abolition des tableaux – Sauf données tabulaires ;-) • Balises spécifiques – <div> <span> – Attention au bazar • Version et compatibilité des navigateurs ?
  43. 43. 43 Visuels II • Lié à la sémantique – <em> </em> – <strong> </strong> • Lié à la forme – <span style="color:red"> </span> – <p class="justify"> </p> – <div id="entete"> </div>
  44. 44. Présentation de site 44http://www.alsacreations.com/static/gabarits/index.html Entête Pied de page Menu Contenu
  45. 45. Le Saint Graal 45 TITRE PIED DE PAGE NAVIGATION PUB CONTENU PRINCIPAL https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
  46. 46. Couleur • Nom – 17 + 130 • Rouge Vert Bleu • rgb(255, 0, 0) • rgb(100%, 0, 0) • #FF0000 ou #F00 46Tiré de http://colorschemedesigner.com/ FF 00 00
  47. 47. 47 Différents médias • Écran : screen • Imprimante : print • Mobile : handheld • Présentation : projection • Braille : braille / embossed • Voix : aural / speech @import url(…) print @media screen { …} Non reconnu par les smartphones
  48. 48. 48 Exemple h1 { font-size : 110%; color : yellow; text-align : center; padding-left : 1em; } p { text-align : justify; } Extrait d’un fichier texte ou d’un bloc d’entête Ne pas laisser trainer de ;
  49. 49. 49 Avoir du style (1) 1. Fichier texte (.css) 2. Balise <style> dans l'entête 3. Attribut style <a style="font-weight:bold" href="…"> </a> A venir : priorité import / type sélecteur
  50. 50. 50 Lien avec un fichier externe <style type="text/css"> @import url(fic1.css); @import url(fic2.css) print; </style> <link rel="stylesheet" type="text/css" href="fichier.css" media="screen" /> Média "screen" par défaut <head> <head>
  51. 51. 51 Entête de fichier HTML <head> <style type="text/css"> <!-- p { text-align : justify; font-weight : normal; } --> </style> </head> Pour les vieux navigateurs
  52. 52. 52 Classe <p> texte par défaut </p> <p class="center"> texte centré </p> .center { text-align : center; } a.petit { font-size : 80%; } Style Code HTML <a class="petit center"> texte </a> Plusieurs classes pour un élément
  53. 53. Plusieurs classes 53 <p class="p1 p2"> texte </a> <p class="p2 p1"> texte </a> <p class="p2"> texte </a> .p1 { text-color : blue; } .p2 { text-color : red; } .p1 .p2 { text-color : gray; } .p1.p2 { text-color : green; } Ordre d’écriture pas important !
  54. 54. 54 Identifiant <div id="entete"> Ent&ecirc;te </div> <div id="baspage"> copie </div> #entete { text-align : center; } #baspage { font-size : 80%; } Style Code HTML ID unique sur une page
  55. 55. 55 Pseudo classe / Pseudo élément • :hover, :focus • :link, :active, :visited • :first-letter, :first-line • :first-child • :before, :after
  56. 56. 56 Exemples a { color : blue; } #menu a { color : red; } h1, h2, h3 { color : white; background-color : blue; } /* h4 { font-size:90%; } */
  57. 57. 57 Avoir du style (2) • Par héritage du contenant • Par type de balise • Par classe d'éléments • Par identification unique • Par pseudo-classe • Par pseudo élément Sélecteurs
  58. 58. 58 Taille • Taille fixe – point (pt) pica (pc) – centimètre (cm) millimètre (mm) – pouce (in) • Taille relative – Cadratin (em) : largeur du "m" – hauteur de x (ex) – pourcentage (%) – pixel (px) Responsive design
  59. 59. 59 Police • font-family – 'Arial', 'Trebuchet MS‘, times, verdana – Police google ? • font-weight – normal bold lighter bolder – De 100 à 900 • font-size – 14px 200% 3em 0.33em – xx-small x-small small medium large x-large xx-large • font-style – normal oblique italic
  60. 60. 60 Texte • text-decoration – underline overline line-through none • text-transform – capitalize lowercase uppercase none • text-align – left right center justify normal a { text-decoration : none; } a:hover { text-decoration : underline overline; }
  61. 61. 61 Espacements • Interligne – line-height • Crénage/interlettrage – letter-spacing • Espace entre les mots – word-spacing
  62. 62. 62 Eléments • En ligne – Affichés au fil du texte – Pas de positionnement précis prévu – Marges inexistantes • Type bloc – Dimensions (hauteur, largeur, profondeur) – Sortie du flux normal ? – Marges internes (padding) et externes (margin) – Bordures • Changer de type – Attribut display : block inline none
  63. 63. 63 Elément de type bloc margin border padding contenu • Occupe tout l'espace disponible par défaut • Les composants peuvent avoir des marges par défaut
  64. 64. Marges • Internes ou padding • Externes ou margin • Fusion des marges – Désactivé si border ou padding ou positionnement 64 margin : 10px margin : 10px 0; margin : 10px 0 0 10px; margin : auto; margin-top margin-right margin-bottom margin-left padding : 1em 0.5em 0.5em 1em; T R B L
  65. 65. 65 Bordures • border – top / right / bottom / left • border-style – dashed dotted double groove hidden inset outset ridge solid none – Tout le cadre ou bord par bord (T R B L ) • border-width – thin medium thick – Nombre (1, 2, 3, 4) • border-color border : 1px solid #B0CBF4; border-bottom : inset;
  66. 66. 66 <div><p>Paragraphe de texte</p></div> 1/ Mettre en bleu p et en vert le div … Paragraphe de texte ? 2/ Mettre une largeur de 300px au div et 100px au p 3/ Ajouter un padding-top d’ 1 em au div et un margin-left de 3em à p Paragraphe de texte Paragraphe de texte Bordure sur le div ?
  67. 67. 67 <div> <p>Premier paragraphe de texte</p> <p>Second paragraphe de texte</p> </div> Premier paragraphe de texte Second paragraphe de texte • Changer les couleurs de fond et identifier les paragraphes • Jouer avec les marges. • Essayer de les coller en hauteur
  68. 68. 68 Positionnement • Modèle de boite • Sortie de flux – Absolu – Relatif – Fixe – Flottant • Profondeur
  69. 69. 69 Modèle de boîte margin border padding contenu • Tous les composants ont des marges par défaut • Reset CSS style
  70. 70. 70 Différents modèles de boîte • Modèle standard Largeur à l'écran = largeur spécifiée + padding + border • Modèle Microsoft (<5 et 6 parfois) Largeur à l'écran = largeur spécifiée = largeur modulable + padding + border
  71. 71. 71 Modèle de boîte standard padding contenu width width:100 % avec padding ou border ? width : auto; box-sizing : content-box
  72. 72. 72 Modèle de boîte Microsoft padding contenu width Modèle par défaut (mode Quirks) si la page HTML ne contient pas de DOCTYPE IE ≥ 6 box-sizing : border-box
  73. 73. 73 Flux normal • Ordre dans lequel apparaissent les éléments • Blocs – les uns sous les autres – utilisent toute la largeur disponible • Éléments en ligne – se suivent pour compléter une ligne <p> <p> <p> <body>
  74. 74. 74 Positionnement relatif • Élément placé dans le flux normal • Décalé ensuite grâce à – top, right, bottom, left • Pas d'impact sur le reste du document • Espace de départ du composant préservé position : relative;
  75. 75. Troisième paragraphe de texte 75 #deuze{ … position : relative; bottom : 1em; left: 1em; } Premier paragraphe de texte Second paragraphe de texte Premier paragraphe de texte Second paragraphe de texte <p id="deuze"> Troisième paragraphe de texte
  76. 76. 76 Positionnement absolu • Sortie du flux complète – top, right, bottom, left • Positionnement par rapport – Au parent s'il est positionné – Au premier conteneur positionné – Body en dernier ressort – Positionné = relatif, fixe ou absolu position : absolute
  77. 77. 77 Entête Pied de page Menu Contenu Aucun conteneur positionné => Position absolue par rapport au body Entête Pied de page Menu Contenu Conteneur parent positionné (relative) => Position absolue par rapport à ce conteneur
  78. 78. 78 <div> <p id="prem">Premier paragraphe de texte</p> <p id="second">Second paragraphe de texte</p> </div> p { margin : 0; } div { width : 300px; height : 200px; background-color : red; } #prem { width:100px; background-color : blue; } #second { width:150px; background-color: green; }
  79. 79. 79 #second { position : absolute; height : 50px; top : 0; left:0; }
  80. 80. 80 #second { right:0; } Solution ? Positionner le div englobant (relative)
  81. 81. 81 Positionnement fixe • L'élément ne défile plus avec la page • FF ou IE7+ position : fixed Menu fixe
  82. 82. 82 Positionnement flottant • Bloc retiré du flux pour être placé à gauche ou à droite du bloc qui le contient • Sa place est alors "libre" • Attention à la compatibilité !!! • Empêcher un flottant – clear : left right both float : left float : right
  83. 83. 83 Texte "long" sur #second float:right sur premier
  84. 84. 84 float : left sur premier et second à largeur fixée • Que se passe t'il si la hauteur du div est petite (20px) ? • Comportement non standard sous IE…
  85. 85. Profondeur • Élément de type bloc • Comportement par défaut – Dernier élément affiché au dessus des autres • Propriété z-index – Seules sont importantes les valeurs relatives 85
  86. 86. Reset sheet • Marges/Ratios différents suivant les navigateurs • Mieux : harmoniser certains éléments – Yahoo UI – Eric Meier – Normalize.css 86 * { margin : 0; padding : 0; font-size : 1em; }
  87. 87. Sélecteurs (1) • Balise, identifiant, classe • Plusieurs éléments • Hiérarchie souple • Héritier direct 87 p > a { text-decoration : none ; } h1, h2, h3 { … } p a { … }
  88. 88. Sélection ou pas ? 88 <div><a> lien 1 </p></div> <a><p> lien 2 </p></a> <p><a> lien 3 </a></p> <p><a><b> lien 4 </b></a></p> <p><b><a> lien 5 </a></b></p> <p><a> lien 6 </a></p> <a> lien 7 </a> p a p > a p+p
  89. 89. Sélecteurs (2) • Élément frères • Attributs 89 p + p { … } p[class] { … } img[class="preview"][width="100"] { … } [title] { … }
  90. 90. Priorité CSS/sélecteurs 1. *, >, + 2. Sélecteur élément ou pseudo-élément 3. Sélecteur classe, attribut ou pseudo-classe 4. Sélecteur Identifiant 5. Attribut style • !important 90
  91. 91. 91 Listes • list-style-type – none, disc, circle, square – decimal, lower-alpha (a), lower-roman (i), upper-alpha (A), upper-roman (I) – armenian, decimal-leading-zero, georgian, lower-greek, lower-latin, upper-latin (IE avec DOCTYPE) • list-style-image : url(fichier) – Comportement différent suivant navigateurs • <ul> type : none • <li> background-image/repeat/position
  92. 92. Positionnement avancé • CSS 2 voire 2.1 • Support partiel – Dégradation gracieuse ? – Hacks – Feuilles de style conditionnelles – Javascript • Display hybride (inline-block) • Calques / Tableaux 92
  93. 93. display : inline-block • Inline – Éléments les uns à côté des autres • Block – Dimensions : width et height • Reste dans le flux 93float Inline-block + vertical-align : top Bug des espaces
  94. 94. Bogue des espaces 94
  95. 95. Tableau (1) • Permet d'afficher sous forme de tableaux tout élément • SANS perte de sémantique • Display – table, table-row, table-column, table-cell – Inline-table, table-caption – table-row/header/footer/column-group • border-collapse, border-spacing • Appliquer le rendu table-celltransforme le parent en tableau 95
  96. 96. Tableau (2) 96 <div id="header"></div> <div id="main"> <div id="lmenu" > </div> <div id="content"> </div> <div id="rmenu" > </div> </div> <div id="footer"></div> #lmenu, #rmenu, #content { display : table-cell } #lmenu, #rmenu { width : 20% }
  97. 97. Outils d’aide • Extensions – Firebug (FF / Chrome) – Web Developer(FF / Chrome) – MS IE DeveloperToolbar • Scripts de validation W3C • IE 9+ : produit intégré • http://browsershots.org 97
  98. 98. Formulaire 98 Nom Prénom Courriel Loïc Personne Cours préféré C++ Java HTML <fieldset> <legend> <label> Couleur spécifique lors de la saisie Alignement
  99. 99. Menu 99 • Menu 1 • Menu 2 • Menu 3 • Menu 4 Menu 1 Menu 2 Menu 3 Menu 4 Menu 1 Menu 2 Menu 3 Menu 4 Menu 1 Menu 2 Menu 3 Menu 4 Affichage par défaut
  100. 100. CV 100
  101. 101. CSS 3 • Ensemble de modules – Stades différents de recommandation • Compatibilité entre navigateurs ? • Sélecteurs • Bordures : ombre, cercle • Transformations 2D et 3D • Des animations, dégradés … • Modifications par l’utilisateur 101
  102. 102. XML
  103. 103. 103 eXtensible Markup Language • Langage générique qui permet d'écrire des langages à balises – XHTML – MathML – SVG • XML 1.0 en 1998 • But : promouvoir/utiliser le SGML • 2012 : Support de certaines technologies encore limité
  104. 104. 104 SGML • Standard Generalized Markup Language • Créé en 1986 ;-) • Séparation forme/contenu • Trop complexe ?
  105. 105. 105 Fichier XML • Fichier texte, plat ? – Règles d'écriture précises – Document bien formé • Structure arborescente – Système de fichier classique – Une racine • Directives supplémentaires – Entête de document – Consignes de présentation • Validation
  106. 106. 106 <collection> <serie nom="Trolls de Troy"> <bd> <titre tome="1">histoires trolles</titre> <auteur>Arleston</auteur> <dessin>Mourier</dessin> <comment>Peur de rien !!!</comment> </bd> <bd> <titre tome="2">le scalp du vénérable</titre> <auteur>Arleston</auteur> <dessin>Mourier</dessin> <comment>Peur de rien !!!</comment> </bd> </serie> </collection>
  107. 107. 107
  108. 108. 108 Type de nœud (1) • Texte – Non vide – Feuille dans l'arbre • Élément – Nom – Groupe logique • Attribut – A pour parent un élément – Nom + valeur
  109. 109. 109 Type de nœud (2) • Commentaire • Instructions de traitement – processing node – Cible + valeur • Racine – Représente le document entier : commentaires + instructions de traitement – Contient l'élément racine <!-- -->
  110. 110. 110 Arbre XML Collection Série Série Série bd bd bd bd bd Racine Feuille Enfants ou contenu Descendants Ascendants Frères
  111. 111. 111 Document bien formé • Syntaxiquement correct • Respect de la structure arborescente • Respect du nom des balises (casse) • Respect des conventions d'écriture des attributs • Utilisation d'entités pour certains caractères <collection></Collection> <serie nom = "Lanfeust"> <a><b></a></b>
  112. 112. Clauses supplémentaires • Entête – UTF-8, UTF-16, ISO-8859-1 – Échapper les caractères : &amp; © • Style • DTD + attribut standalone 112 <?xml version="1.0" standalone="yes" encoding="UTF-8" ?> <?xml-stylesheet type="text/xsl" href="fichier.xsl" > <!DOCTYPE >
  113. 113. 113 <bd> <titre tome="1">histoires trolles</titre> <auteur>Arleston</auteur> <dessin>Mourier</dessin> <comment> <head> <title>Trolls 1</title> </head> <body><p>Peur de rien !!!</p></body> </comment> </bd> Espace de nommage (1) XHTML…
  114. 114. 114 Espace de nommage (2) <collection xmlns="http://www.kiux.net"> … <comment xmlns:xhtml="http://www.w3.org/TR/xhtml11"> <xhtml:head> <xhtml:title>Trolls 1</xhtml:title> </xhtml:head> <xhtml:body> <xhtml:p>Peur de rien !!!</xhtml:p> </xhtml:body> </comment>
  115. 115. Validation • Est-ce que le fichier XML suit des règles précises ? – Présence / ordre des éléments – Attributs – Valeurs pour les balises, attributs ? • DTD – Document Type Definition – Définition de Type de Document • Schémas XML / XML Schema Definition (XSD) • Autres : Relax NG, … 115
  116. 116. 116 DTD & élements <!ELEMENT A (B)> <!ELEMENT A (B, C)> <!ELEMENT A (C, B)> <!ELEMENT A (B | C) > <!ELEMENT A (B, (C | D), E> <!ELEMENT A (B | C | (D, E))> <!ELEMENT A (B?, C)> <!ELEMENT A (B, (C | D)+ , E) > <!ELEMENT A (B|C)* > <!ELEMENT A (#PCDATA, B)* > <!ELEMENT A EMPTY > <!ELEMENT A ANY > • Composé mixte • #PCDATA apparaît en premier Ordre important LIMITE : Niveau de spécification le plus fin Parsed Character Data
  117. 117. 117 DTD & attributs <!ATTLIST A a CDATA #IMPLIED b CDATA #IMPLIED > <!ATTLIST A a CDATA #IMPLIED > <!ATTLIST A b CDATA #IMPLIED > <!ATTLIST A a CDATA #IMPLIED > <!ATTLIST A b CDATA "b" > <!ATTLIST A c CDATA #REQUIRED > <!ATTLIST A d CDATA #FIXED "d" > CDATA choix (oui| non) ID / IDREF ENTITY / ENTITIES NMTOKEN / NMTOKENS NOTATION
  118. 118. 118 <collection> <serie nom="Trolls de Troy"> <bd> <titre tome="1">histoires trolles</titre> <auteur>Arleston</auteur> <dessin>Mourier</dessin> <comment>Peur de rien !!!</comment> </bd> <bd> <titre tome="2">le scalp du vénérable</titre> <auteur>Arleston</auteur> <dessin>Mourier</dessin> <comment>Peur de rien !!!</comment> </bd> </serie> </collection> <!ELEMENT collection (serie)*> <!ELEMENT serie (bd)*> <!ELEMENT bd (titre, auteur, dessin, comment?) > <!ELEMENT auteur (#PCDATA) >
  119. 119. Lier données et DTD • DTD interne • DTD externe 119 <!DOCTYPE racine [ <!ELEMENT nom (#PCDATA) > <!-- ... --> ]> <!DOCTYPE racine SYSTEM "fichier.dtd" >
  120. 120. XML Schéma • Alternative XML de la DTD – Outils classiques (parseur, XSLT) – Non figé – Plus puissant • Norme extensible si besoin • Contraintes sur une balise ou un attribut – Type de données (DATE) – Héritage – Cardinalités plus fines – Facettes, patterns, conversion • Namespaces 120
  121. 121. 121 <?xml version="1.0"?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"> <xs:element name="note"> <xs:complexType> <xs:sequence> <xs:element name="to" type="xs:string"/> <xs:element name="from" type="xs:string"/> <xs:element name="head" type="xs:string"/> <xs:element name="body" type="xs:string"/> </xs:sequence> </xs:complexType> </xs:element> </xs:schema>
  122. 122. Lier XML et schéma 122 <?xml version="1.0"?> <note xmlns="http://www.w3schools.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3schools.com note.xsd"> <to>Tove</to> <from>Jani</from> <head>Reminder</head> <body>Ne pas m'oublier</body> </note> <note xmlns="http://www.w3schools.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="file:note.xsd">
  123. 123. Élément simple • Qui ne contient pas d'autre élément ou d'attribut • Prédéfini – string, decimal, integer, long, boolean, date, time, … • Personnel – Sous type prédéfini – Limitation (facette) • default/fixed 123 <xs:element name="couleur" type="xs:string" default="red"/> <xs:element name="naissance" type="xs:date"/>
  124. 124. Exemples de Facettes 124 <xs:restriction base="xs:string"> <xs:enumeration value="velo"/> <xs:enumeration value="pied"/> <xs:enumeration value="tram"/> </xs:restriction> <xs:simpleType name="pourcentage"> <xs:restriction base="xs:integer"> <xs:minInclusive value="0"/> <xs:maxInclusive value="100"/> </xs:restriction> </xs:simpleType> <xs:restriction base="xs:string"> <xs:pattern value="[a-zA-Z][a-zA-Z][a-zA-Z]"/> </xs:restriction>
  125. 125. Élément complexe (1) • Vide • Texte seulement • Autres éléments • Texte et autres 125 Avec ou sans attribut(s) <xs:element name="serie"> <xs:complexType> </xs:complexType> </xs:element> <xs:element name="serie" type="stype" /> <xs:complexType name="stype"> </xs:complexType>
  126. 126. Élément complexe (2) • Vide – Il suffit de lister les attributs si besoin • Texte seulement (avec extension ou restriction) • Éléments + texte 126 <xs:complexType name="stype" mixed="true"> … </xs:complexType> <xs:complexType name="stype"> <xs:simpleContent> <xs:restriction> </xs:restriction> <xs:simpleContent> </xs:complexType>
  127. 127. Éléments complexes (3) • L'ordre ne compte pas • Les éléments apparaissent 0 ou 1 fois • Un des éléments • Éléments dans l'ordre • N'importe quel élément 127 <xs:all> <xs:choice> <xs:sequence> <xs:element maxOccurs="1" minOccurs="0" > Possibilité de faire des groupes et des groupes d'attributs <xs:any minOccurs="0" />
  128. 128. Attribut • Comme un élément simple • A placer après les éléments complexes • Optionnel – use : optional /required (par défaut) – default : doit respecter le type – fixed • Groupe d'attributs et anyAttribute 128 <xs:attribute name="couleur" type="xs:string" default="red" />
  129. 129. 129 XPATH • Langage pour naviguer dans le document – 1.0 et 2.0 (2007) – Sous-ensemble commun de XSLT et XQuery • Fonctions applicables • Un élément peut être identifié de manière unique • Forme normale/compacte axe::nœudtest [exp1] [exp2] … info0/info1/info2/info3/
  130. 130. 130 Étape de localisation – axe • child – sauf attributs – par défaut • descendant • parent (unique) • ancestor • following-sibling • preceding-sibling • following (dans le document) • preceding(dans le document) • attribute • self • descendant-or-self • ancestor-or-self
  131. 131. Exemples 131 n1 /n0 /n0/n1 //n1 n0//n1 //@lang n0/n1 [1] /n0/n1 [last()] /n0/n1[@lang] /n0/n1[@lang="fr"] /bib/livre[prix>7.0]/titre ../freres tous les enfants de n1 le nœud racine tous les n1 enfants de n0 tous les n1 tous les n1 enfants de n0 tous les attributs lang Premier n1
  132. 132. Présentation • CSS • XSLT 1.0 & 2.0 132
  133. 133. 133 <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="comics.css"?> <collection> <serie nom="Trolls de Troy"> <bd> <titre tome="1">histoires trolles</titre> <auteur>Arleston</auteur> <dessin>Mourier</dessin> <comment>Peur de rien !!!</comment> </bd> <bd> <titre tome="2">le scalp du vénérable</titre> <dessin>Mourier</dessin> <auteur>Arleston</auteur> <comment>La suite...</comment> </bd> </serie> <serie nom="Largo Winch"> <bd> <titre tome="1">Largo Winch</titre> <auteur>Van Hamme</auteur> <comment>Inspiré d'une mémoire dans la peau</comment> </bd> </serie> </collection>
  134. 134. 134 serie { display :block; background-color:#1111FF; padding : 0.25em; margin:0.5em; } bd { display : block; background-color:#AAAAFF; padding : 0.5em; margin:1em; } auteur, dessin, comment { display:block; margin-left : 3em; }
  135. 135. 135 XSLT • Langage de transformation – D'un arbre XML vers un autre – Si transfo en HTML, c'est du XHTML ;-) • 2 versions – Version 1.0 supportée par les navigateurs • Opérations basiques – Tri – Filtre
  136. 136. 136 Lien données/fichier XSL <?xml-stylesheet type="text/xsl" href="comics.xsl"?> <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:nsp="espace de nommage" xmlns="http://www.w3.org/1999/xhtml">
  137. 137. 137 Patrons / templates • Appliquer un traitement à des nœuds particuliers (XPath) <xsl:template match="/"> … <xsl:value-of select="." /> … </xsl:template> <xsl:apply-templates select="xpath"/>
  138. 138. 138 Patrons nommés <xsl:template name="filtering"> <xsl:param name="filter" select="'none'"/> … </xsl:template> <xsl:call-template name="filtering"> <xsl:with-param name="filter" select="…"/> </xsl:call-template>
  139. 139. 139 Tris <xsl:for-each select="//bd" order-by="+parution"> … </xsl:for-each> // order facultatif, - permet changer de sens <xsl:apply-templates select="bd"> <xsl:sort select="parution" data-type="number" order="descending" /> <xsl:sort select="titre" /> </xsl:apply-templates>
  140. 140. 140 Filtres et conditions (1) <xsl:for-each select="//bd[@tome=1]"> … </xsl:for-each> Opérateurs : = != &LT& &GT& <xsl:if test=".[@tome='1']"> … </xsl:if> <xsl:if test="name()='balise'"> … </xsl:if>
  141. 141. 141 Filtres et conditions (2) <xls:choose> <xsl:when match="…"> … </xsl:when> <xsl:when match="…"> … </xsl:when> <xsl:otherwise> … </xsl:otherwise> </xsl:choose>
  142. 142. 142 Variables <xsl:variable name="chemin1" select="document('biblio.xml')/biblio/*"/> <xsl:value-of select="count($chemin1)"/> <xsl:apply-templates select="$chemin1"/> Écrire parfois {$chemin1}
  143. 143. 143 Modification de l'arbre XML <xsl:element> <xsl:attribute> <xsl:comment> <xsl:processing-instruction> <xsl:text> <xsl:copy> <xsl:copy-of>
  144. 144. XML ET PROGRAMMATION
  145. 145. 145 XML et programmation • Simple fichier texte (unicode) • Format spécial – Analyse des documents et transformation en arbres – Navigation d'arbres – Manipulations d'arbres – Sérialiser des arbres en fichier texte
  146. 146. 146 Technologies • Modèle DOM – Chargement complet en mémoire – DOM, JDOM, DOM4J • SAX – "Streaming", pas de stockage – Apache Xerces (DOM + SAX) [Java, C++] • JAXB – Passer d'un schéma à un jeu de classes de manière transparente … (Java EE) • Diverses bibliothèques : XStream
  147. 147. 147 Document Object Model • Recommandation du W3C • Indépendant du langage de programmation • Support – Arbre XML – XPath, DTD, XML Schema • Nœud – Document, Element, Attr, DocumentType, Notation, Entity, EntityReference, Processing Instruction, CharacterData (Text, Comment)
  148. 148. 148 JDOM • Moins générique que DOM • Pas d'analyseur fourni – utiliser DOM ou SAX • Java avec collection • Structures – Parent • Element, Document – Content • Comment, ProcessingInstruction, EntityReference, Text, DocType, Element
  149. 149. 149 Quelques classes/méthodes • Document – getDescendants() • Element – getContents(), get/setAttribute(), addContent() • Namespace • Filter
  150. 150. 150 import org.jdom.*; import org.jdom.input.*; try { SAXBuilder b = new SAXBuilder(); b.setValidation(true); // verification schema (DTD) // pour la validation XML schema b.setProperty("http://java.sun.com/xml/jaxp/ properties/schemaLanguage", "http://www.w3.org/2001/XMLSchema"); String msg = "Pas d'erreur"; try { Document d = b.build(new File(args[0])); } catch (JDOMParseException e) { msg = e.getMessage(); } System.out.println(msg); } catch(Exception e) { System.err.println(e); } Fichier bien formé ? Validation optionnelle DTD par défaut Exemple 1 : lecture de fichier XML
  151. 151. 151 org.jdom, org.jdom.input, org.jom.ouput, org.jdom.transform, javax.xml.transform try { SAXBuilder b = new SAXBuilder(); Document d = b.build(new File(args[0])); Transformer t = TransformerFactory.newInstance().newTransformer( new StreamSource(new File(args[1]))); JDOMSource in = new JDOMSource(d); JDOMResult out = new JDOMResult(); // t.setParameter(nom, valeur); t.transform(in, out); Document h = out.getDocument(); XMLOutputter outputter = new XMLOutputter(); outputter.output(h, System.out); } catch(Exception e) { System.err.println(e); e.printStackTrace(); } Exemple 2 : Transformation XSLT
  152. 152. 152 Simple API for XML • Pas de stockage en mémoire comme les autres – Lecture en le moins de passes possibles • SAX : reconstruire partiellement l'arbre • Flux de caractères / événements – Méthodes callbacks import org.xml.sax.*; import org.xml.sax.helpers.*;
  153. 153. 153 Evénements • Début du document • Balise de début • Balise de fin • Déclaration d'espace de nommage • Espaces lus • Données caractères lues • Fin du document
  154. 154. 154 public class XMLSAXProject extends DefaultHandler { public void startDocument() {} public void endDocument() {} public void startElement( String uri, String localName, String qName, Attributes atts) {} public void endElement( String uri, String localName, String qName) {} public void ignorableWhitespace( char[] ch, int start, int length) {} public void characters( char[] ch, int start, int length) {} public void processingInstruction( String target, String data) {} public static void main(String[] args) { try { XMLSAXProject project = new XMLSAXProject(); XMLReader read = XMLReaderFactory.createXMLReader(); read.setContentHandler(project); read.parse(args[0]); } catch(Exception e) { }}}
  155. 155. JAXB 155
  156. 156. 156 XStream • Initialiser • Utiliser des alias • Sérialiser • Désérialiser XStream xstream = new XStream(); xstream.alias("classe", Classe.class); String s = xtream.toXML(objet); Classe classe = (Classe)xtream.fromXML(string);
  157. 157. 157 FileOutputStream fos = null; XStream xstream = null; try { fos = new FileOutputStream(name); xstream = new XStream(); xstream.toXML(objects, fos); } catch (Exception e) { e.printStackTrace(); } finally { if (fos!=null) fos.close(); } FileInputStream fis = null; XStream xstream = null; try { fis = new FileInputStream(name); xstream = new XStream(); objects = (Composite)xstream.fromXML(fis)); } catch (Exception e) { e.printStackTrace(); } finally { if (fis!=null) fis.close(); } Classe de l'objet
  158. 158. JAVASCRIPT (ECMASCRIPT) 158
  159. 159. javascript – Langage objet à prototype, interprété et typage dynamique, syntaxe C-like – Mais aussi : procédural, récursif – Inventé par Netscape/Brendan Eich (1995) • Version Serveur / version Client • JScript, ECMAScript, Java – Navigateur : interface utilisateur • Validation des données d'un formulaire • Événements sur des composants de la page • Changement dynamique du DOM 159
  160. 160. Inconvénients ? • Modification du DOM • Compatibilité / prise en charge des navigateurs – Que voit l'utilisateur ? – Lynx / Google • Accessibilité ? • Désactivable! 160 <noscript> JS est désactivé ou n'est pas supporté ! </noscript>
  161. 161. Insertion ? • Où ? – Code dans l'entête – Code dans la page Ouaib – Code dans un fichier extérieur • Élément utilisable dès la déclaration • Portée d'une variable / objet (function scope) • Les fonctions se manipulent comme des objets • Sensible à la casse 161 <script type="text/javascript" src="f.js"> </script>
  162. 162. Afficher une boite de dialogue 162 <script type="text/javascript"> <!-- alert("un chtit message!"); // --> </script> <script type="text/javascript"> <![CDATA[ /* code javascript */> // ]]> </script>
  163. 163. Écrire sur la page 163 <script type="text/javascript"> var prenom = "loic"; document.write("<p>"); document.write(prenom); prenom = 0; document.write(prenom); document.write("</p>"); </script> TYPAGE DYNAMIQUE Que voit le navigateur ? POINT VIRGULE ! Oubli du var ? Var après ?
  164. 164. Fonction 164 <script type="text/javascript"> function debogage(texte) { alert("le lien "+texte); // return false; } </script> <a href="javascript:debogage('2');"> Cliquer sur le lien</a> <a href='debogage("3");'>clic</a> OPTIONNEL
  165. 165. Portée / scope des variables 165 <script type="text/javascript"> v1 = "essai"; var v2 = 10; function portee(texte) { var v3 = "…"; v4 = 3; alert(v4); var v4 = 2; v5 = 2; } </script> Scope global = Objet window "use strict";
  166. 166. Fonction anonyme 166 var rigolo = function () { … }; rigolo(); (function () { })(); Exécution immédiate Création d'un espace de nommage !
  167. 167. Objets • Prédéfinis – Date, String, Number, Boolean, Error, RegExp – Array – DOM • document • window • Personnels 167 var o1 = new Object; o1.att = 13; var o2 = {} ;
  168. 168. Objet 168 function Classe() { this.att1 = "0"; this.att2 = 12; this.aff = afficher; this.mod = function(a,b) {}; } var o2 = new Classe(); o2.aff(); function afficher(a) { document.write(a+this.att1); } Classe est un "Constructeur" Pas de notion de classe en JS Classe.prototype.display = function() {}; Copie d'objet
  169. 169. Héritage par prototype 169 function Mere(nom) { this.nom = nom; } function Fille(nom, prenom) { Mere.call(this, nom); this.prenom = prenom; } Fille.prototype = Object.create(Mere.prototype);
  170. 170. Closure / fermeture 170 function f(a) { var b = 3; var self = this; var g = function() { b ? this ? } return g; } https://developer.mozilla.org/fr/docs/Web/JavaScript/Closures
  171. 171. Tableau usuel 171 var tab = new Array(); tab[0] = "zero"; tab[1] = "un"; tab[2] = 2; tab.push("trois"); var tab2 = [3.14, 6.28]; for(var i=0; i<tab.length; ++i) document.write(tab[i]);
  172. 172. Tableau associatif 172 var tab = new Array(); /* Object */ tab["un"] = 1; tab["deux"] = 2; tab.trois = 3; var tab2 = { "un" : 1, "deux" : 2}; for(var cle in tab) document.write(cle+" "+tab[cle]); Pas de propriété length
  173. 173. Document Object Model • Standard W3C (Level 3) • Modèle universel pour gérer et accéder à un document – HTML / XHTML / XML • Stockage du document sous forme d'arbre(s) – Nœud : doctype, élément, commentaire, instruction de traitement, texte, shadowdom… • Gestion des événements 173 https://dom.spec.whatwg.org/#introduction-to-the-dom
  174. 174. 174
  175. 175. DOM : getElementById() 175 <script type="text/javascript"> function apparait() { document.getElementById('rep1') .style.display="block"; } </script> <p>Voici une question ?</p> <a href="javascript:apparait();"> Cliquer pour la réponse</a> <p id="rep1" style="display:none">Voici la réponse</p> Faire apparaître ou disparaître le texte.
  176. 176. DOM : getElementsByTagName() 176 <script type="text/javascript"> function changeP() { var blocs = document.getElementsByTagName('p'); for (var i=0;i<blocs.length;i++) { blocs[i].innerHTML = "bleu"; blocs[i].style.backgroundColor = "blue"; } } </script> getElementsByClass() possible pour un navigateur récent
  177. 177. DOM : sur les nœuds 177 var d = document; var b = d.getElementsByTagName("body")[0]; var p = d.createElement("p"); var t = d.createTextNode("nouveau P"); p.appendChild(t); b.appendChild(p); p.setAttribute("class","bleue"); p.innerHTML = "nouveau P";
  178. 178. Validation formulaire 178 <form name="formu" id="form1" action="…" method="post" onsubmit="javascript:return valider();" > <input type="text" name="email" /> </form> function valider() { var r = true; var e = document.forms["formu"]["email"]; if (e.value.indexOf("@")<0) { alert("email non valide"); r = false; } return r; }; ou sélection par id
  179. 179. Événements • Décrits par le DOM • Support des Listeners • Gestion de la propagation – Capture / Cible / Bubbling • Synchrones et asynchrones • Actions par défaut / annulables • Déclencheurs d'activation 179
  180. 180. Propagation des événements 180 https://w3c.github.io/uievents/
  181. 181. Quelques événements • click • dblclick • mouseover • mouseout • mousedown • mouseup • mousemove • keydown / keyup • keypressed • focus / blur • change • select • submit • reset • load 181 Événements touch Propagation Ordre des événements preventDefault()
  182. 182. Gérer les événements • Attribut sur balise • Propriété d'un élément 182 <a href="…" onclick="…;return false;"> <p onmouseover="…"> var e = document.getElementById("EEE"); e.onclick = function(ev) {} e.addEventListener('click', function(ev){} true/false );
  183. 183. Console / Débogueur • intégrés – IE 9+ (F12), Chrome, Opera (?) • avec extension – FF (Firebug) 183 <script type="text/javascript"> function log (text) { if (typeof console !== 'undefined') console.log(text); else alert(text); } </script>
  184. 184. "Et pis c'est tout !" • Navigateur – Détection • Cookies • Informations documents – Date de mise à jour, url • Temps, Animations – Timer • Erreurs 184 Aller plus loin ? Performance web
  185. 185. Construire un menu 185 <h1>Titre Menu <ol> Contenu <h2> <h3> A construire dynamiquement
  186. 186. ECMAscript 6 ou JS 2015 • En cours d'implémentation par les navigateurs • Objet = "sucre syntaxique" • Typescript (MS) • Traceur 186
  187. 187. jQUERY 187
  188. 188. jQuery ? • Framework Javascript – Portable – Apporte la compatibilité (sélecteurs et IE6) • Plugins • Projet : Core, UI, Qunit, … • Inconvénients majeurs : – la taille – Deux versions • Concurrents : mootools, Prototype, GWT, … 188
  189. 189. $(function() { /* code */ }); jQuery ! • Sélecteurs – Utilisation des fonctions anonymes • Événements / Animations • Opérations sur le DOM • AJAX • Document chargé 189 $(document).ready(function() { /* code a exécuter */ });
  190. 190. Inclusion • Version de production "minified" • Nombreux greffons • Récupération – Google/MS/Yahoo • Mise en cache • Allège charge serveur – Locale 190 <script type="text/javascript" src="jquery.js"> </script>
  191. 191. jQuery ? • Objet – Utilitaires • Méthode – Opérations sur des éléments – Renvoie un objet – Chainable • Mode non conflit 191 $ est un nom de variable légal en javascript. Attention aux conflits si d'autres bibliothèques sont utilisées jQuery ou $ jQuery() ou $() jQuery.noConflict()
  192. 192. Utilitaires • Type : $.isArray() isFunction() isEmptyObject()… • Sérialisation : $.param() • $.browser – .mozilla .msie .opera .webkit • Version de jQuery : $.fn.jquery • DOM : contains()unique()… • Événements : queue() … • Chaînes de caractères : trim() 192
  193. 193. Utilitaires tableaux • Parcours : $.each() • Filtre et sélection : $.grep() $.inArray() • Nouveau tableau : $.map() $.makeArray() • Fusion : $.merge() $.extends() 193 $.each(tab ou objet, function(ind, val) { /* iteration */ /* index ou cle, val = tab[index] */ });
  194. 194. Sélecteurs (1) • Sélection d'élément(s) => sélecteur CSS • Mise en bouche de CSS 3 (p+n) • Sélecteurs propres (p ~ s) 194 $("body") $("p > a")[0] /* size() ou length */ $("p").each(function() { /* this est l'élément */ });
  195. 195. Sélecteurs (2) • [attr], [attr^=], [attr$=] • Pas d'attribut ou pas la valeur • :contains(texte) • :has(selecteur), :not(selecteur) • :first-child(), last-child(), :first, :last, • :nth-child(), :even(), :odd() • :lt(index), :gt(index), eq(index), slice(i1, i2) 195 $("p[class!='justify']") http://api.jquery.com/category/selectors/
  196. 196. Parcourir • .add() • .each(), .map(fonction) • .is(), .filter(); .get() • .parent() • .next() • .prev() • .children() • .first(), .last() 196 http://api.jquery.com/category/traversing/
  197. 197. DOM • hasClass() • addClass() / removeClass() / toggleClass() • css(clé, valeur) • append(), prepend() • html() / val() / text() • attr(nom, valeur) / removeAttr() • prop(nom[,valeur] )/removeProp() : checked 197
  198. 198. Animations • slideUp() / slideDown() / slideToggle() • fadeIn() / fadeOut() / fadeTo() / fadeToggle() • show() / hide() / toogle()/ • animate() • stop() • queue() 198
  199. 199. Événements : click • Lier élément et un événement • Lancer (trigger) un événement • return true/false ou preventDefault() • Tous les événements classiques JS sont utilisables 199 $("").bind("click", function(){}); $("").live("click", function(){}); $("").click(function() {}); $("").click(); Version récente : .on()
  200. 200. Exemple : surbrillance 200 $('p:contains('+s+')') .each(function(){ var reg = new RegExp(s, "g"); $(this).html( $(this).html() .replace(reg , "<span class='hilite'>"+s+"</span>" ) ); }); Ajouter une boite de recherche sur une page pour mettre en surbrillance $t = $(this)
  201. 201. • Tester avec un chaine simple – Ajouter la classe hilite en CSS – Le document doit être chargé • Mettre un petit formulaire • Gérer le cas où le champ texte est vide – Désactiver le bouton ? • Permettre des recherches successives – removeClass (marche pas bien) – Recharger la page (pas bô) – .contents().unwrap() 201
  202. 202. Le retour du menu 202 <h1>Titre Contenu <h2> <h3> Menu <ol> A construire dynamiquement Affichage "sympa"
  203. 203. JSON • JavaScript Object Notation • Alternative au XML – Rapide et natif (eval()) – Plus léger / moins verbeux – Standard, supporté par de nombreux langages – Contenu • Paires clés/valeurs • Liste ordonnée de valeurs – Sécurité ? 203
  204. 204. 204 { "prenom": "ISIMA", "nom" : "ZZ", "age" : 23, "adresse" : { "rue": "1 rue de la Chebarde", "comp": "TSA 60125 – CS 60026", "ville" : "Aubiere CEDEX", "codepostal" : "63178" }, "telephone": [ { "type" : "domicile", "numero": "0473405000" }, { "type" : "portable", "nummero": "0600000000" } ] }
  205. 205. AJAX • AsynchronousJavascriptAnd XML • Communication client-serveur sans recharger une page complète • XMLHttpRequest() – Script dans le même domaine que le serveur – Implémentation suivant navigateurs • Support par jQuery.ajax() – Texte simple, XML, JSON 205
  206. 206. Fichier source texte 206 <?php header("Content-Type:text/html"); $rep = ""; $rep = utf8_encode($txt) echo $rep; ?> <% @page contentType="text/html" pageEncoding="UTF-8" %> .php .jsp
  207. 207. Fichier source XML 207 <?php header("Content-Type:text/xml"); $rep = ""; $rep = utf8_encode($txt) echo $rep; ?> .php
  208. 208. Fichier source JSON 208 <?php header("Content-Type:application/json"); $rep = ""; $rep = utf8_encode($txt) echo $rep; ?> jQuery > 1.5 .php
  209. 209. Code client 209 function texte() { $.ajax({ url : "html.php", complete : function (xhr, result) { if (result!= "success") return; var response = xhr.responseText; $(response).appendTo("body"); } }); }
  210. 210. Validation formulaire 210 http://speckyboy.com/2009/12/17/ 10-useful-jquery-form-validation-techniques-and-tutorials-2/
  211. 211. jQuery UI • Interactions – Drag & drop, tableaux • Widgets • Effets • Thèmes 211
  212. 212. HTML 5 / CSS 3 212
  213. 213. HTML 5 / XHTML 5 • Simplification • Nouvelles balises sémantiques • Support des navigateurs ! Et avis divergents • http://www.html5test.com • http://html5demos.com/ • http://caniuse.com 213
  214. 214. Syntaxe permissive et simplifiée • Simplification • <html><head><body> <thead><tfoot><tbody> optionnelles • <p><li><tr><td> […] fermées automatiquement • Attribut type pour <style> et <script> inutile • Attention au XHTML 5 214 <!doctype html> <meta charset="utf-8"> content html implicite
  215. 215. Nouvelles balises (sémantiques) • <header> • <footer> • <nav> • <aside> • <section> • <article> • <figure> • <figcaption> • <hgroup> • <time> • <mark> 215 D'autres balises ?
  216. 216. 216 <header> <aside> <footer> <nav> <section> <article> <header><h1><div> <aside> <section> <article> <header><h1><div> <aside> Css avancées, Goetter
  217. 217. Utilisation • Pas reconnues par tous – Voire pas affichées du tout (IE 8) – Pas de sens (moteurs de recherche) – Sécurité : Préciser • Internet Explorer 8- ? => javascript 217 display : block; <!– [if lt IE 9]> <script src="http://html5shiv.google.com/svn/trunk/html5.js" <![endif] --> document.createElement("header");
  218. 218. Audio • Options : autoplay et controls • Formats : mp3, ogg, wav – mp3 : ie9, Chrome, Safari – wav : FF, Safari, Opera 218 <audio id="lecteur" autoplay controls> <source src="musique.mp3"> <source src="musique.wav"> </audio> document.getElementById("lecteur").muted
  219. 219. Video • Options : autoplay,controls, preload, loop, poster • Formats : h264 (mp4), ogv, webM – H264 : IE9, Safari, Opera – WebM : IE9, FF, Chrome, Opera – L'ordre peut être important () 219 <video controls> <source src="pingouin.mp4" type="video/mp4"> <source src="pingouin.webm" type="video/webm"> <object type=application/x-shockwave-flash" data="pingouin.swf" <param …. /> </object> Texte alternatif </video>
  220. 220. 220 Canvas (1) <canvas id="dessin" width="640" height="400"> Ici, quelque chose que le navigateur ne peut afficher </canvas> <script> var dessin = document.getElementById("dessin"); var gc = dessin.getContext("2d"); var grad = gc.createLinearGradient(0,50,0,95); grad.addColorStop(0, "blue"); grad.addColorStop(1, "lightblue"); gc.fillStyle = grad; gc.fillRect(0,0,600,300); </script> 3D possible
  221. 221. Canvas (2) 221 <script> gc.fillStyle = "red"; gc.arc(0,0, 200, 0, Math.PI*2, true); gc.fill(); gc.shadowBlur = 50; gc.shadowColor = "green"; gc.lineWidth = 10; gc.strokeStyle = "red"; gc.stroke(); gc.fillStyle="yellow"; gc.font="48px arial"; gc.fillText("un dessin pas tres beau", 10, 50); </script> Aller plus loin : https://developer.mozilla.org/en/Canvas_tutorial
  222. 222. 222 http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
  223. 223. 223
  224. 224. Formulaire • datalist • keygen • meter • progress • output • color • date time • month week • datetime[-local] • email • number • range (slider) • search • tel • url 224 input
  225. 225. input type="email" 225 input:valid { border : 1px solid green; border-right: 8px solid green; } input:invalid { border : 1px solid red; border-right: 8px solid red; } <input type="email" id="email" placeholder="saisir un courriel" required autofocus >
  226. 226. progress 226 <progress id="p" value="0" max="200"> </progress> <body onload="timer()"> function timer() { var c = document.getElementById('p').value; if (c>document.getElementById('p').max-1) c=0; c=c+1; document.getElementById('p').value = c; setTimeout("timer()",20); }
  227. 227. Drag & drop • Attribut : draggable true/false • Transfert de données – setData() getData() effectAllowed dropEffect • Nouveaux événements – dragstart : objet saisi – drag : pdt tout le déplacement – dragend : fin de l'opération – drop : objet lâché – dragenter, dragover, dragleave : entrée/sortie d'une zone de drop • Élément en dehors du navigateur ? 227
  228. 228. 228 <div id="gauche" ondrop="drop(this, event)" ondragover="return false"> <div id="data1" draggable="true" ondragstart="drag(this, event)">1</div> <div id="data2" draggable="true" ondragstart="drag(this, event)">2</div> </div> <div id="droite" ondrop="drop(this, event)" ondragover="return false"> function drag(target, ev) { ev.dataTransfer.setData("Text", target.id); ev.dataTransfer.effectAllowed='move'; } function drop(target, ev) { var id = ev.dataTransfer.getData("Text"); target.appendChild(document.getElementById(id)); ev.preventDefault(); } Autoriser le drop
  229. 229. Mémoire • Cookie ? • sessionStorage – Un site, même fenêtre • localStorage – Plusieurs sessions • Javascript/ JSON • setItem(nom, valeur) / getItem(nom) • clear() 229
  230. 230. TO DO list 230 Choses à faire : • Html5 • Css 3 • javascript Nouveau …… Ajouter HTML : <ul contenteditable="true"> Effacer JAVASCRIPT : document.querySelectorAll("li").length document.getElementById("liste").innerHTML onload / onkeyup / onclick location.reload()
  231. 231. Et encore ? • Nouveaux éléments de formulaire • Géolocalisation • Web hors ligne • Drag & drop • Web socket & web workers – Connexion bidirectionnelle permanente (Chat) – Petits scripts en tache de fond 231 + File API
  232. 232. CSS 2.0 ou 2.1 • min-width max-width min-heightmax-height • :before :after 232 li { display : inline; } li + li:before { content : " > "; } blockquote:before { content : url(une_image.png); } @media print { a:after { content : "( " attr(href) ")"; } }
  233. 233. CSS 3 • Rôle plus important pour attr et content • Nouvelles propriétés / nouveaux sélecteurs • :pseudo-classe • ::pseudo-élément – Noté :pseudo-élément pour rétrocompatibilité 233 p { float : attr(class); } <p class="left"> … </p>
  234. 234. Support des nouveautés ? Préfixes propriétaires 234 p { -webkit-border-radius : 15px; -moz-border-radius : 15px; -khtml-border-radius : 15px; -o-border-radius : 15px; -ms-border-radius : 15px; border-radius : 15px; } Préfixes non reconnus par les outils de validation
  235. 235. Propriétés (contenu) • word-wrap:normal, break-word • overflow: hidden, scroll, auto • overflow-x (ou y) : visible, auto (fixe), scroll, hidden • text-overflow: none, ellipsis(…) • resize : none, vertical, horizontal, both • column-count : 2 • column-gap : 10px • column-rule: 1px solid black 235
  236. 236. Propriétés (décoratives) • @font-face • border-radius • opacityou rgba(255, 0, 0, 0.5) • box-shadow • text-shadow • border-image • background-size et background multiple 236
  237. 237. Nouveaux sélecteurs (1) • attribut^="commence" • attribut$="finit" • attribut*="contient" • input[type="url"] • a[href^="mailto:"] • a[href$="doc"] 237
  238. 238. Nouveaux sélecteurs (2) • :lang(fr) – sélectionner un contenu sur la langue – hérité (hack) • :empty • :root = html mais avec plus de priorité • :target : cible d'une ancre • :not 238 :not(a) a:not(visited) li:not(:first-child)
  239. 239. Nouveaux sélecteurs (3) • :last-child • :nth-child() • :nth-of-type() • :only-child • :only-of-type • :first-of-type() / :last-of-type() 239 :nth-child(2) : 2ème enfant :nth-child(even) /* pair */ :nthchild(3n+1) :nthchild(-n+3) : les 3 1ers p:nth-of-type (2) 2ème paragraphe
  240. 240. Nouveaux sélecteurs (4) • :enabled • :disabled • :checked • :required • :optional 240
  241. 241. Nouvelles unités • rem : root em – Taille par rapport à la balise html – IE 9 + • vh : viewport height / 100 • vw : viewport width / 100 • vmin, vmax 241
  242. 242. calc( ) 242 h1 { width : 100 %; padding : 1em; } h1 { width : 90 %; width : calc(100% - 2em ); padding : 1em; } Les espaces sont importants Les espaces sont importants Erreur modèle de boite standard ou box-sizing : border-box
  243. 243. Variables • Nouveau module – Déjà présentes dans Sass / Less / … – Support très limité (No MS ni Android) • Validité par élément – Héritage et cascade des valeurs 243 :root { --couleur1 : blue; } h1 { background-color : var (--couleur1); }
  244. 244. Media queries • [min-/max-]width / height • Orientation • Only pour compatibilité • Adapter le nombre de colonnes suivant l'affichage 244 p { display:table-cell; } @media screen and (max-width:600 ) { p { display:block; } } } Tester le résultat : http://cybercrab.com/screencheck/ Responsive design
  245. 245. Responsive Web Design • Ethan Marcotte 1. Mobile First 2. Dégradation harmonieuse • Grille fluide • Images flexibles • Media queries 245
  246. 246. Transformations • Zoom : scale(0.5) scale(2) scale(-1) • Rotation : rotate(45deg) rotate(1.5rad) • Perspective : skew(10deg, 10deg) • Translation : translate(x,y) • Combinaison : matrix 246 transform : scale(2) rotate(45deg);
  247. 247. Transitions • Passage d'une propriété CSS à une autre – Lors d'un événement (Javascript) – Avec une pseudo classe :hover 247 img { width:50px; transition-property : width; transition-duration : 1000ms; transition-timing-function : ease; } img:hover { width:100px; }
  248. 248. Hack IE6-IE9 / Polyfill • modernizr • css3pie.com 248 background: -moz-linear-gradient(#D3DAE9, #576E94); background: linear-gradient(#D3DAE9, #576E94); -pie-background: linear-gradient(#D3DAE9, #576E94); behavior:url(./PIE.php); Et plein d'autres http://reference.sitepoint.com/css/hacks Pour les gradients : http://www.colorzilla.com/gradient-editor/
  249. 249. Et encore ? • Animations – Images clés • css3please.com • css3generator.com • caniuse.com 249
  250. 250. Amusez-vous bien …. • Framework – [Twitter] Boostrap – Boilerplate (Initializr) – pureCSS.io (yahoo) • Javascript – Modernizr (Détection) – HTLM5Shiv (Hack IE) 250
  251. 251. Accessibilité • Norme : WAI-ARIA • Points de contrôle • Rôles 251
  252. 252. Et maintenant ? • Composants Web • Flexbox • Web sémantique (Web 3.0) 252 Source : http://www.commitstrip.com/fr/2014/02/12/no-one-is-immune/
  253. 253. 253
  254. 254. 254 Bibliographie (1) • CSS2 Pratique du design web, 2ème éd, R Goetter, Eyrolles, 2005 • CSS avancées. Vers HTML 5 et CSS 3, 2ème éd, R. Goetter, Eyrolles, 2012 • An Introduction to XML and Web Technologies, A. Moller, M. Schwartzbach, Addison Wesley, 2006 • jQuery & jQuery UI, E. Sarion, Eyrolles, 2011 • Responsive Web Design avec HTML5 et CSS3, B Frain, Pearson, 2013 • HTML5, J-P Vincent, J Verrechia, DUNOD, 2011
  255. 255. 255 Bibliographie (2) • http://openweb.eu.org • http://www.w3school.com • http://css.alsacreations.com • http://www.gchagnon.fr/cours/xml/ • http://json.org • http://www.jquery.com • https://developer.mozilla.org/en/JavaScript/A_re- introduction_to_JavaScript

×