Télécharger en tant que PDF, PPTX
![Sélecteurs (2)
• Élément frères
• Attributs
89
p + p { … }
p[class] { … }
img[class="preview"][width="100"] { … }
[title] { … }](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-89-320.jpg)
![Lier données et DTD
• DTD interne
• DTD externe
119
<!DOCTYPE racine [
<!ELEMENT nom (#PCDATA) >
<!-- ... -->
]>
<!DOCTYPE racine SYSTEM "fichier.dtd" >](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-119-320.jpg)
![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>](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-124-320.jpg)
![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/](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-129-320.jpg)
![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](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-131-320.jpg)
![140
Filtres et conditions (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>](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-140-320.jpg)
![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](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-146-320.jpg)
![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](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-150-320.jpg)
![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](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-151-320.jpg)
![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) {
}}}](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-154-320.jpg)
![Afficher une boite de dialogue
162
<script type="text/javascript">
<!--
alert("un chtit message!");
// -->
</script> <script type="text/javascript">
<![CDATA[
/* code javascript */>
// ]]>
</script>](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-162-320.jpg)
![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]);](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-171-320.jpg)
![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](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-172-320.jpg)
![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](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-176-320.jpg)
![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";](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-177-320.jpg)
![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](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-178-320.jpg)
![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] */
});](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-193-320.jpg)
![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 */
});](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-194-320.jpg)
![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/](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-195-320.jpg)
![DOM
• hasClass()
• addClass() / removeClass() / toggleClass()
• css(clé, valeur)
• append(), prepend()
• html() / val() / text()
• attr(nom, valeur) / removeAttr()
• prop(nom[,valeur] )/removeProp() : checked
197](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-197-320.jpg)
![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" }
]
}](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-204-320.jpg)
![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](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-214-320.jpg)
![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");](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-217-320.jpg)
![Formulaire
• datalist
• keygen
• meter
• progress
• output
• color
• date time
• month week
• datetime[-local]
• email
• number
• range (slider)
• search
• tel
• url 224
input](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-224-320.jpg)
![Nouveaux sélecteurs (1)
• attribut^="commence"
• attribut$="finit"
• attribut*="contient"
• input[type="url"]
• a[href^="mailto:"]
• a[href$="doc"]
237](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-237-320.jpg)
![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](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-244-320.jpg)
![Amusez-vous bien ….
• Framework
– [Twitter] Boostrap
– Boilerplate (Initializr)
– pureCSS.io (yahoo)
• Javascript
– Modernizr (Détection)
– HTLM5Shiv (Hack IE)
250](https://image.slidesharecdn.com/html2016a-160524095644/85/Web-ISIMA-250-320.jpg)
Téléchargé parLoic Yon
Web - ISIMA
Le document est une introduction aux technologies web, couvrant des concepts essentiels comme HTML, CSS, JavaScript et leur utilisation dans le développement web. Il aborde la structure des documents HTML, la manipulation des styles avec CSS et l'interaction via JavaScript, tout en mentionnant des pratiques et outils de développement. Enfin, il présente l'évolution des standards web et encourage l'utilisation de CSS pour séparer contenu et présentation.
Web - ISIMA
- 1.
- 2.
- 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. Plan • HTML • CSS •Javascript+ jQuery • XML – Validation : Schémas – Présentation : CSS & XSLT – Programmation 4
- 5.
- 6. 6 Hyper Text Markup Language • Langage ? • Liens hyper texte •Balises • Mélange "subtil" – Contenu – Forme
- 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.
- 9. 9 <html> <head> <title> Titre </title> </head> <body> unpetit 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 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.
- 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. É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 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 <p>Paragraphe</p> <p align="left"> <p align="center"> <palign="right"> <p align="justify"> • Balises de type bloc • <br> : saut de ligne
- 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 Caractères spéciaux (2) é é && È È " " à à ' ' ê ê < < ï ï > > © © Liste non exhaustive…
- 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 Gestion des "blancs" • 1 ou plusieurs blancs = "1 blanc" • Saut de ligne pas important •Espace insécable : • VRAI retour à la ligne : <br> • Paragraphe vide <p> </p>
- 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 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 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 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 Liste de définitions <dl> <dt>Mot 1</dt> <dd>Def 1a</dd> <dd>Def1b</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 Visuels • <u> </u> •<b> </b> • <i> </i> • <blink> </blink> <marquee> </marquee> • <body bgcolor="navajowhite"> Pas standards !
- 26. 26 Image • Images JPEG, GIF, PNG • Balise simple <img> •Attribut src – src="en_construction.gif" • Attribut alt • Attribut title
- 27. Commentaire 27 <!–- texte d'explication--> <!–- <p>Code non commenté</p> <p>Commentaire non imbriquable</p> -->
- 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 Tableau (2) • height, width : px, em, % •Border, border="0" • align : center, right, left • <thead> <tbody> • Fusion de lignes ou de colonnes
- 30.
- 31.
- 32.
- 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. <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. 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 …> À 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. <select> 36 <select name="cours"> <option>C++</option> <option>C#</option> <option>Eiffel</option> <option selected="selected">Java</option> <option>ObjectiveC</option> <option>Smalltalk</option> </select> multiple size size="3"
- 37.
- 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.
- 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.
- 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 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.
- 45.
- 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 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 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 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 Lien avec un fichier externe <style type="text/css"> @import url(fic1.css); @importurl(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 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 Classe <p> texte pardé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. 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 Identifiant <div id="entete"> Entê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 Pseudo classe / Pseudo élément • :hover, :focus • :link, :active, :visited •:first-letter, :first-line • :first-child • :before, :after
- 56. 56 Exemples a { color: blue; } #menu a { color : red; } h1, h2, h3 { color : white; background-color : blue; } /* h4 { font-size:90%; } */
- 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 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 Police • font-family – 'Arial', 'TrebuchetMS‘, 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 Texte • text-decoration – underlineoverline 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 Espacements • Interligne – line-height •Crénage/interlettrage – letter-spacing • Espace entre les mots – word-spacing
- 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 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. 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 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 <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 emau div et un margin-left de 3em à p Paragraphe de texte Paragraphe de texte Bordure sur le div ?
- 67. 67 <div> <p>Premier paragraphe detexte</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 Positionnement • Modèle de boite • Sortie de flux –Absolu – Relatif – Fixe – Flottant • Profondeur
- 69.
- 70.
- 71. 71 Modèle de boîte standard padding contenu width width:100 % avec padding ou border ? width: auto; box-sizing : content-box
- 72.
- 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 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.
- 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.
- 78. 78 <div> <p id="prem">Premier paragraphede 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 #second { position :absolute; height : 50px; top : 0; left:0; }
- 80.
- 81.
- 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.
- 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. 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. 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. 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. 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. Sélecteurs (2) • Élément frères • Attributs 89 p+ p { … } p[class] { … } img[class="preview"][width="100"] { … } [title] { … }
- 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 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. 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. 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.
- 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. Tableau (2) 96 <div id="header"></div> <div id="main"> <divid="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. 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.
- 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.
- 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.
- 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 SGML • Standard Generalized Markup Language • Créé en 1986 ;-) •Séparation forme/contenu • Trop complexe ?
- 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 <collection> <serie nom="Trolls deTroy"> <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. 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 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 Arbre XML Collection Série Série Série bdbd bd bd bd Racine Feuille Enfants ou contenu Descendants Ascendants Frères
- 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. Clauses supplémentaires • Entête – UTF-8, UTF-16, ISO-8859-1 –Échapper les caractères : & © • 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 <bd> <titre tome="1">histoires trolles</titre> <auteur>Arleston</auteur> <dessin>Mourier</dessin> <comment> <head> <title>Trolls1</title> </head> <body><p>Peur de rien !!!</p></body> </comment> </bd> Espace de nommage (1) XHTML…
- 114.
- 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 DTD & élements <!ELEMENT A (B)> <!ELEMENTA (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 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 <collection> <serie nom="Trolls deTroy"> <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. Lier données et DTD • DTD interne • DTD externe 119 <!DOCTYPEracine [ <!ELEMENT nom (#PCDATA) > <!-- ... --> ]> <!DOCTYPE racine SYSTEM "fichier.dtd" >
- 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 <?xml version="1.0"?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"> <xs:element name="note"> <xs:complexType> <xs:sequence> <xs:elementname="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. 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.comnote.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. É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. Exemples de Facettes 124 <xs:restriction base="xs:string"> <xs:enumeration value="velo"/> <xs:enumerationvalue="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. É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. É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. É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. 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 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 É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.
- 132.
- 133. 133 <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheettype="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 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 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 Lien données/fichier XSL <?xml-stylesheet type="text/xsl" href="comics.xsl"?> <?xmlversion="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 Patrons / templates • Appliquer un traitement à des nœuds particuliers (XPath) <xsl:template match="/"> … <xsl:value-ofselect="." /> … </xsl:template> <xsl:apply-templates select="xpath"/>
- 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 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.
- 141.
- 142. 142 Variables <xsl:variable name="chemin1" select="document('biblio.xml')/biblio/*"/> <xsl:value-of select="count($chemin1)"/> <xsl:apply-templatesselect="$chemin1"/> Écrire parfois {$chemin1}
- 143.
- 144.
- 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 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 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 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 Quelques classes/méthodes • Document – getDescendants() •Element – getContents(), get/setAttribute(), addContent() • Namespace • Filter
- 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 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 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 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 public class XMLSAXProjectextends 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.
- 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 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.
- 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. 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. 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. Afficher une boite de dialogue 162 <script type="text/javascript"> <!-- alert("un chtitmessage!"); // --> </script> <script type="text/javascript"> <![CDATA[ /* code javascript */> // ]]> </script>
- 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. 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. 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. Fonction anonyme 166 var rigolo =function () { … }; rigolo(); (function () { })(); Exécution immédiate Création d'un espace de nommage !
- 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. 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. 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. 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. 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. 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. 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.
- 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. 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. 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. 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. É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.
- 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. Gérer les événements • Attribut sur balise • Propriété d'un élément 182 <ahref="…" onclick="…;return false;"> <p onmouseover="…"> var e = document.getElementById("EEE"); e.onclick = function(ev) {} e.addEventListener('click', function(ev){} true/false );
- 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. "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.
- 186. ECMAscript 6 ou JS 2015 • En cours d'implémentation par les navigateurs •Objet = "sucre syntaxique" • Typescript (MS) • Traceur 186
- 187.
- 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. $(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. 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. 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. 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. 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. 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. 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. Parcourir • .add() • .each(), .map(fonction) •.is(), .filter(); .get() • .parent() • .next() • .prev() • .children() • .first(), .last() 196 http://api.jquery.com/category/traversing/
- 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. Animations • slideUp() / slideDown() / slideToggle() • fadeIn() / fadeOut() / fadeTo() / fadeToggle() •show() / hide() / toogle()/ • animate() • stop() • queue() 198
- 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. 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. • Tester avec un chaine simple – Ajouter la classe hiliteen 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.
- 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 { "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. 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. 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. Fichier source XML 207 <?php header("Content-Type:text/xml"); $rep = ""; $rep= utf8_encode($txt) echo $rep; ?> .php
- 208. Fichier source JSON 208 <?php header("Content-Type:application/json"); $rep = ""; $rep= utf8_encode($txt) echo $rep; ?> jQuery > 1.5 .php
- 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.
- 211. jQuery UI • Interactions –Drag & drop, tableaux • Widgets • Effets • Thèmes 211
- 212.
- 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. 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. Nouvelles balises (sémantiques) • <header> • <footer> •<nav> • <aside> • <section> • <article> • <figure> • <figcaption> • <hgroup> • <time> • <mark> 215 D'autres balises ?
- 216.
- 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. 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. 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 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. 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.
- 223.
- 224. Formulaire • datalist • keygen •meter • progress • output • color • date time • month week • datetime[-local] • email • number • range (slider) • search • tel • url 224 input
- 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. 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. 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 <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. Mémoire • Cookie ? • sessionStorage –Un site, même fenêtre • localStorage – Plusieurs sessions • Javascript/ JSON • setItem(nom, valeur) / getItem(nom) • clear() 229
- 230. TO DO list 230 Choses à faire : • Html5 • Css3 • javascript Nouveau …… Ajouter HTML : <ul contenteditable="true"> Effacer JAVASCRIPT : document.querySelectorAll("li").length document.getElementById("liste").innerHTML onload / onkeyup / onclick location.reload()
- 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. CSS 2.0 ou 2.1 • min-width max-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) ")"; } }
- 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. 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. 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. 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. Nouveaux sélecteurs (1) • attribut^="commence" • attribut$="finit" •attribut*="contient" • input[type="url"] • a[href^="mailto:"] • a[href$="doc"] 237
- 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. 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. Nouveaux sélecteurs (4) • :enabled • :disabled •:checked • :required • :optional 240
- 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. 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. 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. 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. Responsive Web Design • Ethan Marcotte 1. Mobile First 2.Dégradation harmonieuse • Grille fluide • Images flexibles • Media queries 245
- 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. 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. 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. Et encore ? • Animations – Images clés •css3please.com • css3generator.com • caniuse.com 249
- 250. Amusez-vous bien …. • Framework – [Twitter] Boostrap –Boilerplate (Initializr) – pureCSS.io (yahoo) • Javascript – Modernizr (Détection) – HTLM5Shiv (Hack IE) 250
- 251.
- 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.
- 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 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