Web - ISIMA

255 vues

Publié le

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

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

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

Web - ISIMA

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

×