Web - ISIMA
255
http://www.isima.fr/~loic Mars 2016 1
Transcript of Web - ISIMA
http://www.isima.fr/~loic
Mars2016
1
2Machinelocale
Navigateur:http://www.isima.fr
ServeurWeb(Apache,…) Traitement dela
requête…
3
Technologiesweb
• StandardsW3C?• HTML/XHTML/XML• CSS /XSLT• Java(Applet)• ECMAScript (Flash,Javascript)
• SCRIPTSCGI,ASP,PHP,JSP,ruby…• Basededonnées?
Plan
• HTML• CSS• Javascript +jQuery
• XML– Validation:Schémas– Présentation :CSS&XSLT– Programmation
4
HTML<5
6
HyperTextMarkupLanguage
• Langage?• Lienshypertexte• Balises
• Mélange"subtil"– Contenu– Forme
7
HTML
• Comprisparunnavigateur– Touslesnavigateursnecomprennentpaslamêmechose
• Simple• Légerentaille– PDF?–WORD?
8
html
entête corps
paragraphe
imageliste
lienmiseenvaleur
9
<html><head><title> Titre </title>
</head><body>un petit contenu
</body></html>
• Baliseouvrante/balisefermante• Lesnavigateursacceptentsouventducodemalécrit!!!• Maispaslesoutilsdevalidation
Uncodetoutsimple…
10
Simplemaisordonné…
• Balise<html>– Précédééventuellementpardesnouvellesbalises(doctypeparex)
• Entête<head>– Informationssurlapage– Titre,jeudecaractères,style
• Corps<body>– Contenudelapageexclusivement
11
<balise1><balise2></balise2>
</balise1>
Listetrèslimitéedebalises,fermantesounon!Insensibleàlacasse(minusculesconseillées)
Desbalisesenordre!
<balise1><balise2></balise1>
</balise2>
<balise_simple>
12
Attribut
• Modification,ajoutsurunebalise• Listerestreintedépendantedelabalise• Insensibleàlacassemaisminusculesconseillées
attribut="valeur"attribut='valeur'
attribut=valeurattribut
OFFICIEL AEVITER
<p id="titre" style="color:red">ROUGE</p>
Éditeurs
• WYSIWYG– AdobeDreamweaver– FrontPage>MicrosoftExpression– Nvu >KompoZer– BlueGriffon– Intégrationavecd’autreslangages?
• Unsimpleéditeurdefichier?– Colorationsyntaxique– Codesource?
13
14
Lesliens;-)
• Lienclassique
– 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">
• Balisesdetypebloc• <br> :sautdeligne
16
Caractèresspéciaux(1)
• Pardéfaut,lescaractèresaccentuésnesontpassupportésparlesnavigateurs
• Solutions– Utiliserdes"entités"– Ajouterunebalisedansl'entête:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
17
Caractèresspéciaux(2)
é é & &
È È " "
à à ' '
ê ê < <
ï ï > >
© ©Listenonexhaustive…
18
Police
• <font> </font>
• <font color="blue">
• <font size="+2">• <font size="-2">
• <font face="Courier">
Choisirunepolicepardéfautouunelistedepolices :essayerdeprendredespolicesquiexistentsurlesdifférentssystèmesd'exploitation
19
Gestiondes"blancs"
• 1ouplusieursblancs="1blanc"• Sautdelignepasimportant
• Espaceinsécable: • VRAIretouràlaligne:<br>• Paragraphevide
<p> </p>
20
Organisation
• Titres– de<h1> à<h6>
• Listes– nonnumérotées(àpuces)<ul>– numérotées<ol>– élémentd'uneliste<li>– listesimbriquables
• Listededéfinition<dl>– titre<dt>– description<dd>
21
Titres
• Structurationdudocument• Organisationhiérarchique– Hautniveau<h1> …</h1>– …– Basniveau<h6> … </h6>
• Balisesdetypebloc
Occupetoute lalargeurdisponible
22
Listenonordonnée• Changerlapuce
– Attributtype– square,circle,disc,none
– CSS:touteimage
• Balisebloc
• UtilisationCSS– menus
<ul><li> … </li><li> … </li><li> … </li>
</ul>
• puce 1• puce 2• puce 3
23
Listeordonnée
• Changerlanumérotation– Attributtype :A,a,I(i),i,1
• Débutdenumérotation– Attributstart
<ol><li> … </li><li> … </li><li> … </li>
</ol>
1. puce 12. puce 23. puce 3
24
Listededéfinitions
<dl><dt>Mot 1</dt><dd>Def 1a</dd><dd>Def 1b</dd><dt>Mot 2</dt><dd>Def 2</dd>
</dl>
Mot 1définition 1adéfinition 1b
Mot 2définition 2
25
Visuels
• <u> </u>• <b> </b>• <i> </i>• <blink> </blink><marquee> </marquee>
• <body bgcolor="navajowhite">
Passtandards!
26
Image
• ImagesJPEG,GIF,PNG• Balisesimple<img>• Attributsrc– src="en_construction.gif"
• Attributalt• Attributtitle
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 L1C3L2C1 L2C2 L2C3
29
Tableau(2)
• height,width :px,em,%• Border,border="0"• align :center,right,left• <thead><tbody>• Fusiondelignesoudecolonnes
30
BaliseTDvalign='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éreriframe
iframe
32
• src,id,name• width,height,frameborder
33
Formulaires
• Utilitéavecunlangagedescriptserveur– Récupérationdesinformations– Vérificationettraitementspécifique
• Contrôlenavigateurparjavascript• <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êtesvenusen:○ Vélo○ Tram○ Voiture○ ÀpiedQuand?○ Aujourd’hui seulement●Toutelasemaine
<form action="mailto:l@h"><p>Vous êtes venus en :</p><input …>Vélo<br><input …> Tram<br><input …> Voiture<br><input …> À pied<p>Quand</p><input …>Aujourd’hui<br><input …>Toute la semaine<input type="submit"></form>
35
EnvoyerMêmenomname ="locomotion"
Autrenomname ="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
Courspréféré
C++
Java
HTML
<fieldset>
<legend>
<label>
Lepositionnementseravuplustard
38
HTML/XHTML
• Balisestoujoursferméesetenminuscules<br /> <img /> <hr />
• Attributsstyle="color:black" checked='checked'
• Préambulededocuments• Meilleureséparationcontenu/présentation
– Balisesobsolètes:<font>, visuelles– Attributsobsolètes– CSS
39
Doctype<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE htmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE htmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML5?
• Recommandationdepuisoctobre2014• Balisessémantiques
– article,details,footer,header,mark,section,summary
• Média– audio,video,embed
• Autres– Canvas (dessinavecECMAScript)– Élémentsdeformulaireetdecontrôle– Stockagededonnées(localousession)
40Nonsupportéparleslecteursdemail:old school power
AVOIRDUSTYLE(CSS)
42
CascadeStyleSheets
• Séparerlecontenudelaforme– 53CSS1,120CSS2,115CSS2.1 ,246CSS3
• Abolitiondestableaux– Saufdonnéestabulaires;-)
• Balisesspécifiques– <div> <span>
– Attention aubazar
• Versionetcompatibilitédesnavigateurs?
43
VisuelsII
• Liéàlasémantique– <em> </em>– <strong> </strong>
• Liéàlaforme– <span style="color:red"> </span>– <p class="justify"> </p>– <div id="entete"> </div>
Présentationdesite
44http://www.alsacreations.com/static/gabarits/index.html
Entête
Pieddepage
MenuContenu
LeSaintGraal
45
TITRE
PIEDDEPAGE
NAVIGATION PUBCONTENUPRINCIPAL
https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
Couleur
• Nom– 17+130
• Rouge VertBleu
• rgb(255,0,0)• rgb(100%,0,0)• #FF0000ou#F00
46Tirédehttp://colorschemedesigner.com/
FF 00 00
47
Différentsmédias
• Écran:screen• Imprimante:print• Mobile:handheld• Présentation:projection• Braille:braille/embossed• Voix:aural /speech
@import url(…) print@media screen { …}
Nonreconnuparlessmartphones
48
Exemple
h1 {font-size : 110%;color : yellow;text-align : center;padding-left : 1em;
}
p {text-align : justify;
}
Extraitd’unfichiertexteoud’unblocd’entête
Nepaslaissertrainerde;
49
Avoirdustyle(1)
1. Fichiertexte(.css)2. Balise<style>dansl'entête3. Attributstyle
<a style="font-weight:bold" href="…"> </a>
Avenir:prioritéimport/typesélecteur
50
Lienavecunfichierexterne
<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"pardéfaut
<head>
<head>
51
EntêtedefichierHTML<head>
<style type="text/css"> <!--
p {text-align : justify;font-weight : normal;
}--></style>
</head>
Pourlesvieuxnavigateurs
52
Classe
<p> texte par défaut </p><p class="center"> texte centré </p>
.center { text-align : center; }a.petit { font-size : 80%; }
Style
CodeHTML
<a class="petit center"> texte </a>
Plusieursclassespourunélément
Plusieursclasses
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; }
Ordred’écriturepasimportant!
54
Identifiant
<div id="entete"> Entête </div><div id="baspage"> copie </div>
#entete { text-align : center; }#baspage { font-size : 80%; }
Style
CodeHTML
IDuniquesurunepage
55
Pseudoclasse/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
Avoirdustyle(2)
• Parhéritageducontenant• Partypedebalise• Parclassed'éléments• Paridentificationunique• Parpseudo-classe• Parpseudoélément
Sélecteurs
58
Taille
• Taillefixe– point(pt)pica(pc)– centimètre(cm)millimètre(mm)– pouce(in)
• Taillerelative– Cadratin(em):largeurdu"m"– hauteurdex(ex)– pourcentage(%)– pixel(px)
Responsivedesign
59
Police• font-family
– 'Arial','Trebuchet MS‘,times,verdana– Policegoogle ?
• font-weight– normalbold lighter bolder– De100à900
• font-size– 14px200%3em0.33em– xx-small x-small small mediumlargex-largexx-large
• font-style– normaloblique italic
60
Texte
• text-decoration– underline overline line-through none
• text-transform– capitalize lowercase uppercase none
• text-align– left rightcenterjustify normal
a { text-decoration : none; }
a:hover { text-decoration : underline overline;
}
61
Espacements
• Interligne– line-height
• Crénage/interlettrage– letter-spacing
• Espaceentrelesmots– word-spacing
62
Eléments
• Enligne– Affichésaufildutexte– Pasdepositionnement précisprévu– Margesinexistantes
• Typebloc– Dimensions(hauteur, largeur,profondeur)– Sortiedufluxnormal?– Margesinternes(padding)etexternes(margin)– Bordures
• Changerdetype– Attributdisplay : block inline none
63
Elément detypebloc
marginborder
padding
contenu
• Occupetoutl'espacedisponiblepardéfaut• Lescomposantspeuventavoirdesmargespardéfaut
Marges
• Internesoupadding• Externesoumargin
• Fusiondesmarges– Désactivésiborderoupadding oupositionnement
64
margin : 10pxmargin : 10px 0;margin : 10px 0 0 10px;margin : auto;
margin-topmargin-rightmargin-bottommargin-left
padding : 1em 0.5em 0.5em 1em; TRBL
65
Bordures• border
– top/right/bottom /left
• border-style– dashed dotteddoublegroovehidden inset outset ridge solid none
– Toutlecadreoubordparbord(TRBL)• border-width
– thin mediumthick– Nombre(1,2,3,4)
• border-color
border : 1px solid #B0CBF4;border-bottom : inset;
66
<div><p>Paragraphe de texte</p></div>
1/Mettreenbleupetenvertlediv…
Paragraphedetexte?
2/Mettreunelargeurde300pxaudivet100pxaup
3/Ajouterunpadding-topd’1em audivetunmargin-left de3emàp
Paragraphedetexte
Paragraphedetexte
Borduresurlediv?
67
<div><p>Premier paragraphe de texte</p><p>Second paragraphe de texte</p> </div>
Premierparagraphe detexte
Secondparagraphe detexte
• Changerlescouleursdefondetidentifierlesparagraphes• Joueraveclesmarges.• Essayerdelescollerenhauteur
68
Positionnement
• Modèledeboite• Sortiedeflux
– Absolu– Relatif– Fixe– Flottant
• Profondeur
69
Modèledeboîte
marginborder
padding
contenu
• Touslescomposantsontdesmargespardéfaut• ResetCSSstyle
70
Différentsmodèlesdeboîte
• ModèlestandardLargeuràl'écran=largeurspécifiée+padding+border
• ModèleMicrosoft(<5et6parfois)Largeuràl'écran=largeurspécifiée=largeurmodulable+padding+border
71
Modèledeboîtestandard
padding
contenu width
width:100%avecpadding ouborder?width :auto;
box-sizing :content-box
72
ModèledeboîteMicrosoft
padding
contenu width
Modèlepardéfaut(modeQuirks)silapageHTMLnecontientpasdeDOCTYPE IE≥6
box-sizing :border-box
73
Fluxnormal
• Ordredanslequelapparaissentleséléments• Blocs
– lesunssouslesautres– utilisenttoutelalargeurdisponible
• Élémentsenligne– sesuiventpourcompléteruneligne
<p>
<p>
<p>
<body>
74
Positionnementrelatif
• Élémentplacédanslefluxnormal• Décaléensuitegrâceà
– top,right,bottom,left
• Pasd'impactsurlerestedudocument• Espacededépartducomposantpréservé
position : relative;
Troisièmeparagraphedetexte
75
#deuze{…position:relative;bottom :1em;left: 1em;
}
Premierparagraphe detexteSecondparagraphe detexte
Premierparagraphe detexteSecondparagraphe detexte
<pid="deuze">
Troisièmeparagraphedetexte
76
Positionnementabsolu
• Sortiedufluxcomplète– top,right,bottom,left
• Positionnementparrapport– Auparents'ilestpositionné– Aupremierconteneurpositionné– Bodyendernierressort– Positionné =relatif,fixeouabsolu
position : absolute
77
Entête
Pieddepage
MenuContenu
Aucunconteneurpositionné=>Positionabsolueparrapportaubody
Entête
Pieddepage
MenuContenu
Conteneur parentpositionné(relative)=>Positionabsolueparrapportàceconteneur
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 ledivenglobant (relative)
81
Positionnementfixe
• L'élémentnedéfileplusaveclapage• FFouIE7+
position : fixed
Menufixe
82
Positionnementflottant
• Blocretirédufluxpourêtreplacéàgaucheouàdroitedublocquilecontient
• Saplaceestalors"libre"• Attentionàlacompatibilité!!!• Empêcherunflottant– clear :left rightboth
float : left float : right
83
Texte"long"sur#second
float:right surpremier
84
float :left surpremieretsecondàlargeurfixée
• Quesepasset'ilsilahauteurdudivestpetite (20px)?• Comportement nonstandardsousIE…
Profondeur
• Élémentdetypebloc• Comportementpardéfaut
– Dernierélément affichéaudessusdesautres
• Propriétéz-index– Seulessontimportanteslesvaleursrelatives
85
Resetsheet
• Marges/Ratiosdifférentssuivantlesnavigateurs
• Mieux: harmonisercertainséléments– YahooUI– Eric Meier– Normalize.css
86
* {margin : 0; padding : 0; font-size : 1em;
}
Sélecteurs(1)
• Balise,identifiant,classe• Plusieurséléments
• Hiérarchiesouple
• Héritierdirect
87
p > a {text-decoration : none ;
}
h1, h2, h3 { … }
p a { … }
Sélectionoupas?
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émentfrères
• Attributs
89
p + p { … }
p[class] { … }
img[class="preview"][width="100"] { … }
[title] { … }
PrioritéCSS/sélecteurs
1. *,>,+2. Sélecteurélémentoupseudo-élément3. Sélecteurclasse,attributoupseudo-classe4. SélecteurIdentifiant5. Attributstyle
• !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(IEavecDOCTYPE)
• list-style-image:url(fichier)– Comportement différentsuivantnavigateurs
• <ul>type:none• <li>background-image/repeat/position
Positionnementavancé
• CSS2voire2.1• Supportpartiel
– Dégradationgracieuse?– Hacks– Feuillesdestyleconditionnelles– Javascript
• Displayhybride(inline-block)• Calques/Tableaux
92
display:inline-block
• Inline– Éléments lesunsàcôtédesautres
• Block– Dimensions:width etheight
• Restedansleflux
93float Inline-block
+ vertical-align : top
Bugdesespaces
Boguedesespaces
94
Tableau(1)
• Permetd'affichersousformedetableauxtoutélément
• SANSpertedesémantique• Display
– table,table-row,table-column,table-cell– Inline-table, table-caption– table-row/header/footer/column-group
• border-collapse,border-spacing• Appliquerlerendutable-cell transformeleparententableau
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%}
Outilsd’aide
• Extensions– Firebug (FF/Chrome)–WebDeveloper (FF/Chrome)–MSIEDeveloperToolbar
• ScriptsdevalidationW3C• IE9+:produitintégré
• http://browsershots.org
97
Formulaire
98
Nom
Prénom
Courriel
Loïc
Personne
Courspréféré
C++
Java
HTML
<fieldset>
<legend>
<label>
Couleurspécifiquelorsdelasaisie
Alignement
Menu
99
• Menu1• Menu2• Menu3• Menu4
Menu1Menu2Menu3Menu4
Menu1 Menu2 Menu3 Menu4
Menu1 Menu2 Menu3 Menu4
Affichagepardéfaut
CV
100
CSS3
• Ensembledemodules– Stadesdifférentsderecommandation
• Compatibilitéentrenavigateurs?
• Sélecteurs• Bordures:ombre,cercle• Transformations2Det3D• Desanimations,dégradés…• Modificationsparl’utilisateur
101
XML
103
eXtensibleMarkupLanguage
• Langagegénériquequipermetd'écriredeslangagesàbalises– XHTML– MathML– SVG
• XML1.0en1998• But:promouvoir/utiliserleSGML• 2012:Supportdecertainestechnologiesencorelimité
104
SGML
• StandardGeneralizedMarkupLanguage• Crééen1986;-)• Séparationforme/contenu• Tropcomplexe?
105
FichierXML• Fichiertexte,plat?
– Règlesd'écritureprécises– Documentbienformé
• Structurearborescente– Systèmedefichierclassique– Uneracine
• Directivessupplémentaires– Entêtededocument– Consignesdepré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
Typedenœud(1)• Texte
– Nonvide– Feuilledansl'arbre
• Élément– Nom– Groupelogique
• Attribut– Apourparentunélément– Nom+valeur
109
Typedenœud(2)
• Commentaire
• Instructionsdetraitement– processing node– Cible+valeur
• Racine– Représente ledocumententier:commentaires+instructionsdetraitement
– Contient l'élémentracine
<!-- -->
110
ArbreXML
Collection
Série Série Série
bd bd bd bd bd
RacineFeuille Enfantsoucontenu
DescendantsAscendantsFrères
111
Documentbienformé
• Syntaxiquementcorrect• Respectdelastructurearborescente
• Respectdunomdesbalises(casse)
• Respectdesconventionsd'écrituredesattributs
• Utilisationd'entitéspourcertainscaractères
<collection></Collection>
<serie nom = "Lanfeust">
<a><b></a></b>
Clausessupplémentaires
• Entête
– UTF-8,UTF-16,ISO-8859-1– Échapperlescaractères:&©
• Style
• DTD+attributstandalone
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>
Espacedenommage(1)
XHTML…
114
Espacedenommage(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-cequelefichierXMLsuitdesrèglesprécises?– Présence/ordredeséléments– Attributs– Valeurspourlesbalises,attributs?
• DTD– DocumentTypeDefinition– DéfinitiondeTypedeDocument
• SchémasXML/XMLSchema Definition (XSD)• Autres:RelaxNG,…
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• #PCDATAapparaîtenpremier
Ordreimportant
LIMITE:Niveaudespécification leplusfinParsed Character Data
117
DTD&attributs<!ATTLIST A
a CDATA #IMPLIEDb 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" >
CDATAchoix (oui| non)ID / IDREF
ENTITY / ENTITIESNMTOKEN / NMTOKENSNOTATION
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) >
LierdonnéesetDTD
• DTDinterne
• DTDexterne
119
<!DOCTYPE racine [<!ELEMENT nom (#PCDATA) ><!-- ... -->]>
<!DOCTYPE racine SYSTEM "fichier.dtd" >
XMLSchéma• AlternativeXMLdelaDTD
– Outilsclassiques(parseur,XSLT)– Nonfigé– Pluspuissant
• Normeextensiblesibesoin• Contraintessurunebaliseouunattribut
– Typededonnées(DATE)– Héritage– Cardinalitésplusfines– Facettes,patterns,conversion
• Namespaces120
121
<?xml version="1.0"?><xs:schemaxmlns: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>
LierXMLetsché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émentsimple
• Quinecontientpasd'autreélémentoud'attribut• Prédéfini
– string,decimal,integer,long,boolean,date,time,…
• Personnel– Soustypeprédéfini– Limitation(facette)
• default/fixed
123
<xs:element name="couleur" type="xs:string" default="red"/>
<xs:element name="naissance" type="xs:date"/>
ExemplesdeFacettes
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émentcomplexe(1)
• Vide• Texteseulement• Autreséléments• Texteetautres
125
Avecousansattribut(s)
<xs:element name="serie"><xs:complexType>
</xs:complexType></xs:element> <xs:element name="serie"
type="stype" /><xs:complexType name="stype"></xs:complexType>
Élémentcomplexe(2)
• Vide– Ilsuffitdelisterlesattributssibesoin
• Texteseulement(avecextensionourestriction)
• É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émentscomplexes(3)
• L'ordrenecomptepas• Lesélémentsapparaissent0ou1fois
• Undeséléments
• Élémentsdansl'ordre
• N'importequelélément
127
<xs:all>
<xs:choice>
<xs:sequence>
<xs:element maxOccurs="1" minOccurs="0" >
Possibilitédefairedesgroupesetdesgroupesd'attributs
<xs:any minOccurs="0" />
Attribut
• Commeunélémentsimple• Aplaceraprèslesélémentscomplexes
• Optionnel– use :optional /required (pardéfaut)– default :doitrespecterletype– fixed
• Grouped'attributsetanyAttribute
128
<xs:attribute name="couleur" type="xs:string" default="red" />
129
XPATH
• Langagepournaviguerdansledocument– 1.0et2.0(2007)– Sous-ensemble commundeXSLTetXQuery
• Fonctionsapplicables• Unélémentpeutêtreidentifiédemanièreunique• Formenormale/compacte
axe::nœudtest [exp1] [exp2] …
info0/info1/info2/info3/
130
Étapedelocalisation– axe
• child– saufattributs– pardéfaut
• descendant• parent(unique)• ancestor• following-sibling• preceding-sibling
• following (dansledocument)
• preceding (dansledocument)
• attribute• self• descendant-or-self• ancestor-or-self
Exemples
131
n1/n0/n0/n1//n1n0//n1//@lang
n0/n1 [1]/n0/n1 [last()]/n0/n1[@lang]/n0/n1[@lang="fr"]/bib/livre[prix>7.0]/titre../freres
touslesenfantsden1lenœudracinetouslesn1enfantsden0touslesn1touslesn1enfantsden0touslesattributslang
Premiern1
Présentation
• CSS• XSLT1.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
• Langagedetransformation– D'unarbreXMLversunautre– SitransfoenHTML,c'estduXHTML;-)
• 2versions– Version1.0supportéeparlesnavigateurs
• Opérationsbasiques– Tri– Filtre
136
Liendonnées/fichierXSL
<?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
• Appliqueruntraitementàdesnœudsparticuliers(XPath)
<xsl:template match="/">…<xsl:value-of select="." />…
</xsl:template>
<xsl:apply-templates select="xpath"/>
138
Patronsnommé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,- permetchangerdesens
<xsl:apply-templates select="bd"> <xsl:sort select="parution" data-type="number" order="descending" /><xsl:sort select="titre" />
</xsl:apply-templates>
140
Filtresetconditions(1)
<xsl:for-each select="//bd[@tome=1]">…</xsl:for-each>
Opérateurs:=!=<&>&
<xsl:if test=".[@tome='1']">…
</xsl:if>
<xsl:if test="name()='balise'">…
</xsl:if>
141
Filtresetconditions(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
Modificationdel'arbreXML
<xsl:element>
<xsl:attribute>
<xsl:comment>
<xsl:processing-instruction>
<xsl:text>
<xsl:copy> <xsl:copy-of>
XMLETPROGRAMMATION
145
XMLetprogrammation
• Simplefichiertexte(unicode)• Formatspécial– Analysedesdocumentsettransformationenarbres
– Navigationd'arbres–Manipulationsd'arbres– Sérialiserdesarbresenfichiertexte
146
Technologies
• ModèleDOM– Chargementcompletenmémoire– DOM,JDOM,DOM4J
• SAX– "Streaming",pasdestockage– ApacheXerces (DOM+SAX)[Java,C++]
• JAXB– Passerd'unschémaàunjeudeclassesdemanièretransparente…(JavaEE)
• Diversesbibliothèques:XStream
147
DocumentObjectModel
• RecommandationduW3C• Indépendantdulangagedeprogrammation• Support
– ArbreXML– XPath,DTD,XMLSchema
• Nœud– Document,Element, Attr,DocumentType, Notation,Entity,EntityReference, Processing Instruction,CharacterData (Text,Comment)
148
JDOM
• MoinsgénériquequeDOM• Pasd'analyseurfourni– utiliserDOMouSAX
• Javaaveccollection• Structures– Parent
• Element,Document– Content
• Comment,ProcessingInstruction,EntityReference,Text,DocType,Element
149
Quelquesclasses/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 schemab.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);
}
Fichierbienformé?ValidationoptionnelleDTDpardéfaut
Exemple1:lecturedefichierXML
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();
}
Exemple2:TransformationXSLT
152
SimpleAPIforXML
• Pasdestockageenmémoirecommelesautres– Lectureenlemoinsdepassespossibles
• SAX:reconstruirepartiellementl'arbre• Fluxdecaractères/événements–Méthodescallbacks
import org.xml.sax.*;import org.xml.sax.helpers.*;
153
Evénements
• Débutdudocument• Balisededébut• Balisedefin• Déclarationd'espacedenommage• Espaceslus• Donnéescaractèreslues• Findudocument
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
• Utiliserdesalias
• 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();
}
Classedel'objet
JAVASCRIPT (ECMASCRIPT)
158
javascript
– Langageobjetàprototype,interprétéettypagedynamique,syntaxeC-like
–Maisaussi:procédural,récursif– InventéparNetscape/BrendanEich(1995)
• VersionServeur/versionClient• JScript,ECMAScript, Java
– Navigateur:interfaceutilisateur• Validationdesdonnéesd'unformulaire• Événements surdescomposantsdelapage• Changement dynamiqueduDOM
159
Inconvénients?
• ModificationduDOM• Compatibilité/priseenchargedesnavigateurs
– Quevoitl'utilisateur?– Lynx/Google
• Accessibilité?• Désactivable !
160
<noscript> JS est désactivé ou n'est pas supporté !
</noscript>
Insertion?
• Où?– Codedansl'entête– CodedanslapageOuaib– Codedansunfichierextérieur
• Élémentutilisabledèsladéclaration• Portéed'unevariable/objet(function scope)• Lesfonctionssemanipulentcommedesobjets• Sensibleàlacasse
161
<script type="text/javascript" src="f.js"> </script>
Afficheruneboitededialogue
162
<script type="text/javascript"><!--
alert("un chtit message!");// -->
</script> <script type="text/javascript"><![CDATA[
/* code javascript */>// ]]>
</script>
Écriresurlapage
163
<script type="text/javascript">var prenom = "loic";document.write("<p>");document.write(prenom);prenom = 0;document.write(prenom);document.write("</p>");
</script>
TYPAGEDYNAMIQUE
Quevoitlenavigateur?
POINTVIRGULE!
Oubliduvar?
Varaprè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/scopedesvariables
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>
Scopeglobal=Objet
window
"usestrict";
Fonctionanonyme
166
var rigolo = function () {…
};
rigolo();
(function () {})();
Exécution immédiate
Créationd'unespacedenommage!
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);
}
Classeestun"Constructeur"
PasdenotiondeclasseenJS
Classe.prototype.display = function() {};
Copied'objet
Héritageparprototype
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
Tableauusuel
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]);
Tableauassociatif
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]);
Pasdepropriétélength
DocumentObjectModel
• StandardW3C(Level 3)• Modèleuniverselpourgéreretaccéderàundocument– HTML/XHTML/XML
• Stockagedudocumentsousformed'arbre(s)– Nœud:doctype,élément,commentaire, instructiondetraitement, texte,shadowdom…
• Gestiondesévénements
173https://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>
Faireapparaîtreoudisparaîtreletexte.
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()possiblepourunnavigateurrécent
DOM:surlesnœ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";
Validationformulaire
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;
};
ousélectionparid
Événements
• DécritsparleDOM• SupportdesListeners• Gestiondelapropagation– Capture/Cible/Bubbling
• Synchronesetasynchrones• Actionspardéfaut/annulables• Déclencheursd'activation
179
Propagationdesévénements
180https://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 PropagationOrdredesévénements
preventDefault()
Gérerlesévénements
• Attributsurbalise
• 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– IE9+(F12),Chrome,Opera (?)
• avecextension– FF(Firebug)
183
<script type="text/javascript">function log (text) {if (typeof console !== 'undefined')
console.log(text); else alert(text);
} </script>
"Etpisc'esttout!"
• Navigateur– Détection
• Cookies• Informationsdocuments
– Datedemiseàjour,url
• Temps,Animations– Timer
• Erreurs
184
Allerplusloin?Performanceweb
Construireunmenu
185
<h1>Titre
Menu<ol>
Contenu<h2><h3>
Aconstruiredynamiquement
ECMAscript 6ouJS2015
• Encoursd'implémentationparlesnavigateurs• Objet="sucresyntaxique"
• Typescript (MS)• Traceur
186
jQUERY
187
jQuery ?
• FrameworkJavascript– Portable– Apporte lacompatibilité(sélecteursetIE6)
• Plugins• Projet:Core,UI,Qunit,…• Inconvénientsmajeurs:
– lataille– Deuxversions
• Concurrents:mootools,Prototype,GWT,…
188
$(function() {/* code */
});
jQuery !
• Sélecteurs– Utilisationdesfonctionsanonymes
• Événements/Animations• OpérationssurleDOM• AJAX• Documentchargé
189
$(document).ready(function() {/* code a exécuter */
});
Inclusion
• Versiondeproduction"minified"• Nombreuxgreffons• Récupération
– Google/MS/Yahoo• Miseencache• Allègechargeserveur
– Locale
190
<script type="text/javascript"src="jquery.js">
</script>
jQuery ?
• Objet– Utilitaires
• Méthode– Opérationssurdeséléments– Renvoieunobjet– Chainable
• Modenonconflit
191
$ estunnomdevariablelégal enjavascript.Attention auxconflitssid'autresbibliothèques sontutilisées
jQuery ou $
jQuery() ou $()
jQuery.noConflict()
Utilitaires
• Type:$.isArray()isFunction()isEmptyObject()…• Sérialisation:$.param()• $.browser
– .mozilla .msie .opera .webkit
• VersiondejQuery :$.fn.jquery• DOM:contains() unique()…• Événements:queue()…• Chaînesdecaractères:trim()
192
Utilitairestableaux
• Parcours:$.each()• Filtreetsélection:$.grep()$.inArray()• Nouveautableau:$.map()$.makeArray()• Fusion:$.merge()$.extends()
193
$.each(tab ou objet, function(ind, val) {/* iteration *//* index ou cle, val = tab[index] */
});
Sélecteurs(1)
• Sélectiond'élément(s)=>sélecteurCSS• MiseenbouchedeCSS3(p+n)• Sélecteurspropres(p~s)
194
$("body")
$("p > a")[0] /* size() ou length */
$("p").each(function() {/* this est l'élément */
});
Sélecteurs(2)
• [attr],[attr^=],[attr$=]• Pasd'attributoupaslavaleur
• :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()
196http://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émentetunévénement
• Lancer(trigger)unévénement
• returntrue/falseoupreventDefault()• TouslesévénementsclassiquesJSsontutilisables
199
$("").bind("click", function(){});$("").live("click", function(){});$("").click(function() {});
$("").click();
Versionré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>")
); });
Ajouteruneboitederecherchesurunepagepourmettreensurbrillance
$t =$(this)
• Testeravecunchainesimple– Ajouter laclassehilite enCSS– Ledocumentdoitêtrechargé
• Mettreunpetitformulaire• Gérerlecasoùlechamptexteestvide
– Désactiver lebouton?
• Permettredesrecherchessuccessives– removeClass (marchepasbien)– Rechargerlapage(pasbô)– .contents().unwrap()
201
Leretourdumenu
202
<h1>Titre
Contenu<h2><h3>
Menu<ol>
Aconstruiredynamiquement
Affichage"sympa"
JSON
• JavaScriptObjectNotation• AlternativeauXML
– Rapideetnatif(eval())– Plusléger/moinsverbeux– Standard,supportépardenombreuxlangages– Contenu
• Pairesclés/valeurs• Listeordonnéedevaleurs
– 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
• Asynchronous JavascriptAndXML• Communicationclient-serveursansrechargerunepagecomplète
• XMLHttpRequest()– Scriptdanslemêmedomainequeleserveur– Implémentation suivantnavigateurs
• SupportparjQuery.ajax()– Textesimple,XML,JSON
205
Fichiersourcetexte
206
<?phpheader("Content-Type:text/html");
$rep = "";$rep = utf8_encode($txt)echo $rep;
?>
<% @page contentType="text/html"pageEncoding="UTF-8"
%>
.php
.jsp
FichiersourceXML
207
<?phpheader("Content-Type:text/xml");
$rep = "";$rep = utf8_encode($txt)echo $rep;
?> .php
FichiersourceJSON
208
<?phpheader("Content-Type:application/json");
$rep = "";$rep = utf8_encode($txt)echo $rep;
?>
jQuery >1.5
.php
Codeclient
209
function texte() {$.ajax({url : "html.php",complete : function (xhr, result) {if (result!= "success") return;var response = xhr.responseText;$(response).appendTo("body");}
});}
Validationformulaire
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
HTML5/CSS3
212
HTML5/XHTML5
• Simplification• Nouvellesbalisessémantiques• Supportdesnavigateurs!Etavisdivergents• http://www.html5test.com• http://html5demos.com/• http://caniuse.com
213
Syntaxepermissiveetsimplifiée
• Simplification
• <html><head><body><thead><tfoot><tbody>optionnelles
• <p><li><tr><td>[…]ferméesautomatiquement• Attributtypepour<style>et<script>inutile
• AttentionauXHTML5
214
<!doctype html>
<meta charset="utf-8">content htmlimplicite
Nouvellesbalises(sémantiques)
• <header>• <footer>• <nav>• <aside>• <section>• <article>• <figure>
• <figcaption>• <hgroup>• <time>• <mark>
215
D'autresbalises?
216
<header>
<aside>
<footer>
<nav>
<section><article><header><h1><div>
<aside>
<section><article><header><h1><div>
<aside>
Css avancées,Goetter
Utilisation
• Pasreconnuespartous– Voirepasaffichéesdutout(IE8)– Pasdesens(moteursderecherche)– Sécurité:Préciser
• InternetExplorer8- ?=>javascript
217
display : block;
<!– [if lt IE 9]><scriptsrc="http://html5shiv.google.com/svn/trunk/html5.js"
<![endif] -->
document.createElement("header");
Audio
• Options:autoplay etcontrols• 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'ordrepeutêtreimportant()
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>
3Dpossible
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>
Allerplusloin:https://developer.mozilla.org/en/Canvas_tutorial
222http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
223
Formulaire
• datalist• keygen• meter• progress• output
• color• datetime• monthweek• datetime[-local]• email• number• range(slider)• search• tel• url
224
input
inputtype="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• Transfertdedonnées
– setData()getData()effectAllowed dropEffect
• Nouveauxévénements– dragstart :objetsaisi– drag:pdt toutledéplacement– dragend :findel'opération– drop:objet lâché– dragenter,dragover,dragleave :entrée/sortied'unezonededrop
• Élémentendehorsdunavigateur?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();
}
Autoriserledrop
Mémoire
• Cookie?• sessionStorage
– Unsite,mêmefenêtre
• localStorage– Plusieurssessions
• Javascript /JSON
• setItem(nom,valeur)/getItem(nom)• clear()
229
TODOlist
230
Chosesàfaire:• Html5• Css 3• javascript
Nouveau…… Ajouter
HTML :<ul contenteditable="true">
Effacer
JAVASCRIPT :document.querySelectorAll("li").lengthdocument.getElementById("liste").innerHTMLonload / onkeyup / onclicklocation.reload()
Etencore?
• Nouveauxélémentsdeformulaire• Géolocalisation• Webhorsligne• Drag&drop• Websocket&webworkers
– Connexionbidirectionnellepermanente (Chat)– Petitsscriptsentachedefond
231
+FileAPI
CSS2.0ou2.1
• min-widthmax-widthmin-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) ")";
}}
CSS3
• Rôleplusimportantpourattr etcontent
• Nouvellespropriétés/nouveauxsélecteurs• :pseudo-classe• ::pseudo-élément
– Noté:pseudo-élément pourrétrocompatibilité
233
p {float : attr(class);
} <p class="left"> … </p>
Supportdesnouveautés?Préfixesproprié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éfixesnonreconnusparlesoutilsdevalidation
Propriétés(contenu)
• word-wrap:normal,break-word• overflow:hidden,scroll,auto• overflow-x(ouy):visible,auto(fixe),scroll,hidden• text-overflow:none,ellipsis (…)• resize :none,vertical,horizontal,both• column-count:2• column-gap:10px• column-rule :1pxsolid black
235
Propriétés(décoratives)
• @font-face• border-radius• opacity ourgba(255,0,0,0.5)• box-shadow• text-shadow• border-image• background-sizeetbackgroundmultiple
236
Nouveauxsélecteurs(1)
• attribut^="commence"• attribut$="finit"• attribut*="contient"• input[type="url"]• a[href^="mailto:"]• a[href$="doc"]
237
Nouveauxsélecteurs(2)
• :lang(fr)– sélectionneruncontenusurlalangue– hérité(hack)
• :empty• :root =htmlmaisavecplusdepriorité• :target :cibled'uneancre• :not
238
:not(a)a:not(visited)li:not(:first-child)
Nouveauxsé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
Nouveauxsélecteurs(4)
• :enabled• :disabled• :checked
• :required• :optional
240
Nouvellesunités
• rem:root em– Tailleparrapportàlabalisehtml– IE9+
• 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;
}Lesespacessont
importantsLesespacessont
importants
Erreurmodèledeboitestandard
oubox-sizing :border-box
Variables
• Nouveaumodule– DéjàprésentesdansSass /Less /…– Supporttrèslimité(NoMSniAndroid)
• Validitéparélément– Héritageetcascadedesvaleurs
243
:root {--couleur1 : blue;
}
h1 {background-color : var (--couleur1);
}
Mediaqueries• [min-/max-]width /height• Orientation• Only pourcompatibilité
• Adapter lenombredecolonnessuivantl'affichage
244
p { display:table-cell; }
@media screen and (max-width:600 ) {p { display:block; } }
}
Tester lerésultat:http://cybercrab.com/screencheck/
Responsivedesign
ResponsiveWebDesign
• EthanMarcotte1. MobileFirst2. Dégradationharmonieuse
• Grillefluide• Imagesflexibles• 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
• Passaged'unepropriétéCSSàuneautre– Lorsd'unévénement (Javascript)– Avecunepseudoclasse:hover
247
img {width:50px;transition-property : width;transition-duration : 1000ms;transition-timing-function : ease;
}img:hover {
width:100px;}
HackIE6-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);
Etpleind'autreshttp://reference.sitepoint.com/css/hacksPourlesgradients:http://www.colorzilla.com/gradient-editor/
Etencore?
• Animations– Imagesclés
• css3please.com• css3generator.com• caniuse.com
249
Amusez-vousbien….
• Framework– [Twitter]Boostrap– Boilerplate (Initializr)– pureCSS.io (yahoo)
• Javascript– Modernizr (Détection)– HTLM5Shiv(HackIE)
250
Accessibilité
• Norme:WAI-ARIA• Pointsdecontrôle• Rôles
251
Etmaintenant?• ComposantsWeb• Flexbox
• Websémantique(Web3.0)
252Source:http://www.commitstrip.com/fr/2014/02/12/no-one-is-immune/
253
254
Bibliographie(1)
• CSS2Pratiquedudesignweb,2ème éd,RGoetter,Eyrolles,2005
• CSSavancées.VersHTML5etCSS3,2ème éd,R.Goetter,Eyrolles,2012
• AnIntroductiontoXMLandWebTechnologies,A.Moller,M.Schwartzbach,AddisonWesley,2006
• jQuery &jQuery UI,E.Sarion,Eyrolles,2011• ResponsiveWebDesignavecHTML5etCSS3,BFrain,
Pearson,2013• HTML5,J-P Vincent,JVerrechia,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
