SlideShare uma empresa Scribd logo
1 de 255
Baixar para ler offline
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)
• SCRIPTS	CGI,	ASP,	PHP,	JSP,	ruby…
• Base	de	données	?
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
– PDF	?
– WORD	?
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
• Les	navigateurs	acceptent	souvent	du	code	mal	écrit	!!!
• Mais	pas	les	outils	de	validation
Un	code	tout	simple…
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
<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
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>
É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
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
<p>Paragraphe</p>
<p align="left">
<p align="center">
<p align="right">
<p align="justify">
• Balises	de	type	bloc
• <br> :	saut	de	ligne
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
Caractères	spéciaux	(2)
&eacute; é &amp; &
&Egrave; È &quot; "
&agrave; à &apos; '
&ecirc; ê &lt; <
&iuml; ï &gt; >
&copy; ©
Liste	non	exhaustive…
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
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
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
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
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
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
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
Visuels
• <u> </u>
• <b> </b>
• <i> </i>
• <blink> </blink>
<marquee> </marquee>
• <body bgcolor="navajowhite">
Pas	standards	!
26
Image
• Images	JPEG,	GIF,	PNG
• Balise	simple	<img>
• Attribut	src
– src="en_construction.gif"
• Attribut	alt
• Attribut	title
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> L2C3 </td>
</tr>
</table>
L1C1 L1C2 L1C3
L2C1 L2C2 L2C3
29
Tableau	(2)
• height,	width :	px,	em,	%
• Border,	border="0"
• align :	center,	right,	left
• <thead>	<tbody>
• Fusion	de	lignes	ou	de	colonnes
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
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écifique
• Contrôle	navigateur	par	javascript
• <form>	:	name,	action,	method
• <input>	:	type	
• <textarea>	:	name rows cols
• <select>	<option>
• <fieldset>	<legend>	<label>
<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
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"
<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"
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
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
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">
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
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	tableaux
– Sauf	données	tabulaires	;-)
• Balises	spécifiques	
– <div> <span>
– Attention	au	bazar
• Version	et	compatibilité	des	navigateurs	?
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>
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/demos/holy-grail/
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
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
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
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
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
Entête	de	fichier	HTML
<head>
<style type="text/css">
<!--
p {
text-align : justify;
font-weight : normal;
}
-->
</style>
</head>
Pour	les	vieux	navigateurs
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
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
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
Pseudo	classe	/	Pseudo	élément
• :hover,	:focus
• :link,	:active,	:visited
• :first-letter,	:first-line
• :first-child
• :before,	:after
56
Exemples
a { color : blue; }
#menu a {
color : red;
}
h1, h2, h3 {
color : white;
background-color : blue;
}
/* h4 { font-size:90%; } */
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
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
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
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
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
– Dimensions	(hauteur,	largeur,	profondeur)
– Sortie	du	flux	normal	?
– Marges	internes	(padding)	et	externes	(margin)
– Bordures
• Changer	de	type
– Attribut	display : block inline none
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
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
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
<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
<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
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	Microsoft	(<5	et	6	parfois)
Largeur	à	l'écran	=	largeur	spécifiée
=	largeur	modulable	+	padding	+	border
71
Modèle	de	boîte	standard
padding
contenu width
width:100	%	avec	padding ou	border	?
width :	auto;
box-sizing :	content-box
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
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
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;
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
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
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
<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
#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	est	alors	"libre"
• Attention	à	la	compatibilité	!!!
• Empêcher	un	flottant	
– clear :	left right	both
float : left float : right
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)	?
• Comportement	non	standard	sous	IE…
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
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;
}
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 { … }
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
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. Sélecteur	Identifiant
5. Attribut	style
• !important
90
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
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
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
Bogue	des	espaces
94
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
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%
}
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
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
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
CV
100
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
XML
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
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	
– Système	de	fichier	classique
– Une	racine
• Directives	supplémentaires
– Entête	de	document
– Consignes	de	présentation
• Validation
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
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
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
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	(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>
Clauses	supplémentaires
• Entête
– UTF-8,	UTF-16,	ISO-8859-1
– Échapper	les	caractères	:	&amp;	&#0169;
• Style
• DTD	+	attribut	standalone
112
<?xml version="1.0" standalone="yes"
encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl"
href="fichier.xsl" >
<!DOCTYPE >
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
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>
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
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
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
<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) >
Lier	données	et	DTD
• DTD	interne
• DTD	externe
119
<!DOCTYPE racine [
<!ELEMENT nom (#PCDATA) >
<!-- ... -->
]>
<!DOCTYPE racine SYSTEM "fichier.dtd" >
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
<?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>
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">
É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"/>
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>
É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>
É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>
É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" />
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
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
É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
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
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 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
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
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
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
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
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
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
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
Filtres	et	conditions	(2)
<xls:choose>
<xsl:when match="…">
…
</xsl:when>
<xsl:when match="…">
…
</xsl:when>
<xsl:otherwise>
…
</xsl:otherwise>
</xsl:choose>
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
Modification	de	l'arbre	XML
<xsl:element>
<xsl:attribute>
<xsl:comment>
<xsl:processing-instruction>
<xsl:text>
<xsl:copy> <xsl:copy-of>
XML	ET	PROGRAMMATION
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
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
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
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
Quelques	classes/méthodes
• Document
– getDescendants()
• Element
– getContents(), get/setAttribute(),
addContent()
• Namespace
• Filter
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
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
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
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
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) {
}}}
JAXB
155
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
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
JAVASCRIPT (ECMASCRIPT)
158
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
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>
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>
Afficher	une	boite	de	dialogue
162
<script type="text/javascript">
<!--
alert("un chtit message!");
// -->
</script> <script type="text/javascript">
<![CDATA[
/* code javascript */>
// ]]>
</script>
É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	?
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
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";
Fonction	anonyme
166
var rigolo = function () {
…
};
rigolo();
(function () {
})();
Exécution	immédiate
Création	d'un	espace	de	nommage	!
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 = {} ;
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
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);
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
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]);
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
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
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.
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
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";
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
É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
Propagation	
des	événements
180
https://w3c.github.io/uievents/
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()
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 );
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>
"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
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)
• Traceur
186
jQUERY
187
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
$(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 */
});
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>
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()
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
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] */
});
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 */
});
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/
Parcourir
• .add()
• .each(),	.map(fonction)
• .is(),	.filter();	.get()
• .parent()
• .next()
• .prev()
• .children()
• .first(),	.last()
196
http://api.jquery.com/category/traversing/
DOM
• hasClass()
• addClass()	/	removeClass()	/	toggleClass()
• css(clé,	valeur)
• append(),	prepend()
• html()	/	val()	/	text()
• attr(nom,	valeur)	/	removeAttr()
• prop(nom[,valeur]	)/removeProp()	:	checked
197
Animations
• slideUp()	/	slideDown()	/	slideToggle()
• fadeIn()	/	fadeOut()	/	fadeTo()	/	fadeToggle()
• show()	/	hide()	/	toogle()/
• animate()
• stop()
• queue()
198
É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()
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)
• 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
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,	supporté	par	de	nombreux	langages
– Contenu	
• Paires	clés/valeurs
• Liste	ordonnée	de	valeurs
– Sécurité	?
203
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" }
]
}
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
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
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;
?>
jQuery >	1.5
.php
Code	client
209
function texte() {
$.ajax({
url : "html.php",
complete : function (xhr, result) {
if (result!= "success") return;
var response = xhr.responseText;
$(response).appendTo("body");
}
});
}
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://www.html5test.com
• http://html5demos.com/
• http://caniuse.com
213
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
Nouvelles	balises	(sémantiques)
• <header>
• <footer>
• <nav>
• <aside>
• <section>
• <article>
• <figure>
• <figcaption>
• <hgroup>
• <time>
• <mark>
215
D'autres	balises	?
216
<header>
<aside>
<footer>
<nav>
<section>
<article>
<header><h1><div>
<aside>
<section>
<article>
<header><h1><div>
<aside>
Css avancées,	Goetter
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");
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
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
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
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
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
• number
• range	(slider)
• search
• tel	
• url 224
input
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 >
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);
}
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
<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
Mémoire
• Cookie	?
• sessionStorage
– Un	site,	même	fenêtre
• localStorage
– Plusieurs	sessions
• Javascript/	JSON
• setItem(nom,	valeur)	/	getItem(nom)
• clear()
229
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()
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
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) ")";
}
}
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>
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
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
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
Nouveaux	sélecteurs	(1)
• attribut^="commence"
• attribut$="finit"
• attribut*="contient"
• input[type="url"]
• a[href^="mailto:"]	
• a[href$="doc"]
237
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)
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
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 :	viewport width /	100
• vmin,	vmax
241
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
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);
}
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
Responsive	Web	Design
• Ethan	Marcotte
1. Mobile	First
2. Dégradation	harmonieuse
• Grille	fluide
• Images	flexibles
• Media queries
245
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);
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;
}
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/
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
– Modernizr (Détection)
– HTLM5Shiv	(Hack	IE)
250
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/12/no-one-is-immune/
253
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
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

Mais conteúdo relacionado

Semelhante a Web - ISIMA

Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30Sébastien Lejeune
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2Benoît Simard
 
Structurer ses travaux SAS à l'aide de pages HTML, Joël Rivest
Structurer ses travaux SAS à l'aide de  pages HTML, Joël RivestStructurer ses travaux SAS à l'aide de  pages HTML, Joël Rivest
Structurer ses travaux SAS à l'aide de pages HTML, Joël Rivestsasreference
 
Stream processing et SQL
Stream processing et SQLStream processing et SQL
Stream processing et SQLBruno Bonnin
 
Développement Web
Développement WebDéveloppement Web
Développement Webmastertic
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Microsoft Technet France
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !davrous
 
R fait du la tex
R fait du la texR fait du la tex
R fait du la texCdiscount
 
Loucif Redha développement d'applications web - php - my sql
Loucif Redha  développement d'applications web - php - my sqlLoucif Redha  développement d'applications web - php - my sql
Loucif Redha développement d'applications web - php - my sqlRedha LOUCIF
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.pptAmineReal
 
introduction au SQL et MySQL
introduction au SQL et MySQLintroduction au SQL et MySQL
introduction au SQL et MySQLAbdoulaye Dieng
 
Développement Web
Développement WebDéveloppement Web
Développement Webmastertic
 
Play SQL at PostgreSQL Lyon User Group
Play SQL at PostgreSQL Lyon User GroupPlay SQL at PostgreSQL Lyon User Group
Play SQL at PostgreSQL Lyon User Grouparagot1
 
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...VISEO
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09Claude Coulombe
 

Semelhante a Web - ISIMA (20)

Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Structurer ses travaux SAS à l'aide de pages HTML, Joël Rivest
Structurer ses travaux SAS à l'aide de  pages HTML, Joël RivestStructurer ses travaux SAS à l'aide de  pages HTML, Joël Rivest
Structurer ses travaux SAS à l'aide de pages HTML, Joël Rivest
 
Stream processing et SQL
Stream processing et SQLStream processing et SQL
Stream processing et SQL
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
 
R fait du la tex
R fait du la texR fait du la tex
R fait du la tex
 
Découverte HTML5/CSS3
Découverte HTML5/CSS3Découverte HTML5/CSS3
Découverte HTML5/CSS3
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Loucif Redha développement d'applications web - php - my sql
Loucif Redha  développement d'applications web - php - my sqlLoucif Redha  développement d'applications web - php - my sql
Loucif Redha développement d'applications web - php - my sql
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
 
introduction au SQL et MySQL
introduction au SQL et MySQLintroduction au SQL et MySQL
introduction au SQL et MySQL
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
#4 css 101
#4 css 101#4 css 101
#4 css 101
 
Play SQL at PostgreSQL Lyon User Group
Play SQL at PostgreSQL Lyon User GroupPlay SQL at PostgreSQL Lyon User Group
Play SQL at PostgreSQL Lyon User Group
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 

Mais de Loic Yon

Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018
Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018
Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018Loic Yon
 
Découverte d'UNIX - ISIMA
Découverte d'UNIX - ISIMADécouverte d'UNIX - ISIMA
Découverte d'UNIX - ISIMALoic Yon
 
C1 - Langage C - ISIMA - Première partie
C1 - Langage C - ISIMA - Première partieC1 - Langage C - ISIMA - Première partie
C1 - Langage C - ISIMA - Première partieLoic Yon
 
C3 - Langage C - ISIMA 1 - Troisieme partie
C3 - Langage C - ISIMA 1 - Troisieme partieC3 - Langage C - ISIMA 1 - Troisieme partie
C3 - Langage C - ISIMA 1 - Troisieme partieLoic Yon
 
Introduction à la SDL2
Introduction à la SDL2Introduction à la SDL2
Introduction à la SDL2Loic Yon
 
Introduction à l'objet - Deuxième année ISIMA
Introduction à l'objet - Deuxième année ISIMAIntroduction à l'objet - Deuxième année ISIMA
Introduction à l'objet - Deuxième année ISIMALoic Yon
 
Cours de C++ / Tronc commun deuxième année ISIMA
Cours de C++ / Tronc commun deuxième année ISIMACours de C++ / Tronc commun deuxième année ISIMA
Cours de C++ / Tronc commun deuxième année ISIMALoic Yon
 

Mais de Loic Yon (7)

Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018
Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018
Java - Support etudiant - Tronc Commun Deuxième année ISIMA - 2018
 
Découverte d'UNIX - ISIMA
Découverte d'UNIX - ISIMADécouverte d'UNIX - ISIMA
Découverte d'UNIX - ISIMA
 
C1 - Langage C - ISIMA - Première partie
C1 - Langage C - ISIMA - Première partieC1 - Langage C - ISIMA - Première partie
C1 - Langage C - ISIMA - Première partie
 
C3 - Langage C - ISIMA 1 - Troisieme partie
C3 - Langage C - ISIMA 1 - Troisieme partieC3 - Langage C - ISIMA 1 - Troisieme partie
C3 - Langage C - ISIMA 1 - Troisieme partie
 
Introduction à la SDL2
Introduction à la SDL2Introduction à la SDL2
Introduction à la SDL2
 
Introduction à l'objet - Deuxième année ISIMA
Introduction à l'objet - Deuxième année ISIMAIntroduction à l'objet - Deuxième année ISIMA
Introduction à l'objet - Deuxième année ISIMA
 
Cours de C++ / Tronc commun deuxième année ISIMA
Cours de C++ / Tronc commun deuxième année ISIMACours de C++ / Tronc commun deuxième année ISIMA
Cours de C++ / Tronc commun deuxième année ISIMA
 

Último

Semaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptxSemaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptxMartin M Flynn
 
Rapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFERapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFEAhmam Abderrahmane
 
Formation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changementFormation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changementM2i Formation
 
Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2JeanLucHusson
 
Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024frizzole
 
Exercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositionsExercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositionslaetitiachassagne
 
La Projection orthogonale en dessin technique
La Projection orthogonale en dessin techniqueLa Projection orthogonale en dessin technique
La Projection orthogonale en dessin techniquessuser4dbdf2
 

Último (7)

Semaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptxSemaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptx
 
Rapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFERapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFE
 
Formation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changementFormation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changement
 
Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2
 
Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024
 
Exercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositionsExercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositions
 
La Projection orthogonale en dessin technique
La Projection orthogonale en dessin techniqueLa Projection orthogonale en dessin technique
La Projection orthogonale en dessin technique
 

Web - ISIMA