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 ...
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…
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
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>
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"
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
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 ;
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
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
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
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
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 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) >
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>
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
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
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>
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 ?
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
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
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.
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
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()
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
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
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");
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
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
• Css 3
• javascript
Nouveau …… Ajouter
HTML :
<ul contenteditable="true">
Effacer
JAVASCRIPT :
document.querySelectorAll("li").length
document.getElementById("liste").innerHTML
onload / onkeyup / onclick
location.reload()
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
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