Internet
ING1 TREMPLIN
Développement Web
HTML5
CSS3
PHP5
Javascript
Ajax
Partie 2/4
Olivier Pons / 2013 - 2014
HTML5, CSS3, PHP5, Javascript, AJAX
1 – HTML
1h. Les nouveautés du HTML5
- Nouvelle syntaxe
- Le principe des balises sémantiques
- Les balises audio / vidéo
- Le canvas
- Les formulaires
- Le web-storage
- La géolocalisation
- Les web-sockets
- Les web-workers
2 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
1h – HTML – Les nouveautés du HTML5
1h-i. Une nouvelle syntaxe
<!DOCTYPE html> <!DOCTYPE html PUBLIC
<html> "-//W3C//DTD XHTML 1.0
<head> Strict//EN"
<meta charset=”utf-8”> "[Link]
</head> /[Link]">
<body>
</body>
</html>
[Link]
3 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
1h – HTML – Les nouveautés du HTML5
1h-ii. Des balises ”sémantiques”
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>
[Link]
4 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
1h – HTML – Les nouveautés du HTML5
1h-iii. Balises audio / video
<video src="nom_fichier.ogg"> <audio src="musique.mp3">
Votre navigateur ne Votre navigateur ne
gère pas l'élément gère pas l'élément
<code>video</code>. <code>audio</code>.
</video> </audio>
controls
width
loop
autoplay
preload
[Link]
5 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
1f – HTML – Les principales balises
1g-iii-a. Les objets multimédias : video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Votre navigateur
ne connait pas le tag video.
</video>
[Link] 6 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
1f – HTML – Les principales balises
1g-iii-b. Les objets multimédias : audio
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Votre navigateur
ne connait pas le tag audio.
</audio>
[Link] 7 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
1h – HTML – Les nouveautés du HTML5
1h-iv. API Canvas
L'élément HTML5 <canvas> est utilisé pour tracer des
graphismes, à la volée, via du scripting (JavaScript).
L'élément <canvas> est uniquement un conteneur. Vous
devez faire du script pour pouvoir tracer des graphiques.
Canvas a plusieurs méthodes pour tracer des lignes, des
rectangles, des cercles, lettres, et ajouter des images.
<canvas id="monCanvas" width="200" height="100"></canvas>
[Link]
8 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
1h – HTML – Les nouveautés du HTML5
1h-v. Les formulaires HTML5
Les formulaires HTML sont utilisés pour envoyer des
données à un serveur.
Un formulaire HTML peut contenir des éléments à remplir
tels que des champs de formulaires, des checkboxes, des
boutons radio, des boutons de soumission (”submit”) etc.
Il peut contenir également des listes de sélection, des
textarea, des légendes, des captions et autres éléments
sémantiques.
HTML5 : <datalist>, <keygen> et <output>
[Link] 9 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
1h – HTML – Les nouveautés du HTML5
1h-vi. Les attributs HTML5
<form> autocomplete <input> height
<form> novalidate <input> width
<input> autocomplete <input> list
<input> autofocus <input> min
<input> form <input> max
<input> formaction <input> multiple
<input> formenctype <input> pattern (regexp)
<input> formmethod <input> placeholder
<input> formnovalidate <input> required
<input> target <input> step
[Link]
10 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
1h – HTML – Les nouveautés du HTML5
1h-vii. Le Web storage
Avec HTML5, les pages web ont la possibilité de stocker
localement des données à l'intérieur du navigateur.
Avant : cookies. Web Storage sécurisé et plus rapide. Les
données ne sont pas systématiquement envoyées, mais
UNIQUEMENT lorsqu'on le veut. De plus on peut stocker
des données de grande taille sans affecter la performance du
site web.
Les données sont stockées via des paires clé/valeur, et une
page web ne peut qu'accéder aux données qu'elle même a
stocké.
[Link]
11 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
1h – HTML – Les nouveautés du HTML5
1h-vii. Le Web storage
if (typeof(Storage)!=="undefined") {
// Ok ! localStorage et sessionStorage supportés !
// Un peu de code...
[Link] = "Pons";
[Link]("result")
.innerHTML="Nom :" + [Link];
} else {
// Pas de support web storage,..
}
[Link]
12 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
1h – HTML – Les nouveautés du HTML5
1h-viii. La géolocalisation
L'API de géolocatisation HTML5 est utilisée pour récupérer la
position géographique d'un utilisateur. Comme cela peut
compromettre la vie privée, la position n'est pas récupérable tant
que l'utilisateur n'a pas donné son approbation.
<script>var x=[Link]("demo");
function getLocation() {
if ([Link]) {
[Link](function (position) {
[Link] =
"Lat. " + [Link] + ”, ” +
"lng. " + [Link];
});
} else {
[Link]="La géolocation n'est pas supportée par ce navigateur.";
}
}
</script>
[Link] 13 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
1h – HTML – Les nouveautés du HTML5
1h-ix. Les Web sockets
La spécification des WebSockets définit une API qui établit
une connection entre un navigateur Web et un serveur.
En d'autres termes : il y a une connexion persistante entre
le client et le serveur et les deux peuvent envoyer des
données n'importe quand.
var connection = new WebSocket(
'[Link] ['soap', 'xmpp']
);
ws: / wss: / https:
[Link] = function () { };
[Link] = function (error) { };
[Link] = function (e) { };
[Link] 14 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
1h – HTML – Les nouveautés du HTML5
1h-x. Les Web workers
Un web worker est une fonction JavaScript qui tourne en arrière
plan, indépendamment des autres scrips, sans affecter la
performance de l'affichage de la page.
L'internaute peut continuer à faire ce qu'il veut : click, sélection,
remplissage de formulaire etc., pendant que le web worker
tourne en tâche de fond.
if (typeof(w)=="undefined") {
w=new Worker("demo_workers.js");
}
[Link]=function(event){
[Link]("result").innerHTML=[Link];
};
[Link] 15 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2 - CSS
2a. CSS - Généralités
- CSS = Cascading Style Sheets
- Définit comment afficher des éléments HTML
- Créées avec le HTML 4.0 pour résoudre un problème
- Feuilles de styles externes font économiser du travail
- Feuilles de styles externes = dans des fichiers CSS
HTML n'a jamais été prévu pour contenir des tags de
formattage de document.
Il était prévu pour définir le contenu d'un document.
[Link]
16 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2b – CSS – Les sélecteurs
2b-i. Syntaxe
[Link]
17 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2 - CSS
2b-ii. Syntaxe
h1 {
color:green;
} TP !
h2 {
color:green;
} Rappel : html5 declaration
p { pour le template html5
color:green;
}
[Link]
18 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2f – CSS – Le CSS3
2c-i. Les sélecteurs
En CSS, les sélecteurs sont des masques utilisés pour
sélectionner les éléments sur lesquel vous voulez appliquer
un style.
<p class="intro">Texte</p>
Sélecteur .class
Exemple .intro
Sélectionne tous les éléments ayant class=”intro”
[Link]
19 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2b – CSS – Les sélecteurs
2c-ii. Les sélecteurs
h1, h2, p { TP !
color: green;
} Rappel : html5 declaration
.maClasse {
background-color: red;
Pour le template html5
}
#monId {
background-color: red;
}
[Link]
20 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2b – CSS – Les sélecteurs
2c-iii. Les pseudo-classes
[Link]:pseudo-classe {
propriete: valeur;
}
[Link]:visited {
color:#FF0000; TP !
}
p:first-child { Rappel : html5 declaration
color:blue;
}
Pour le template html5
p > i:first-child {
color:blue;
}
p:first-child i {
color:blue;
}
[Link] 21 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2b – CSS – Les sélecteurs
2b-iv. Les pseudo-éléments
Pseudo = pas de vrais éléments. Juste des
principes. :link
:visited
p:first-line :active
p:first-letter :hover
h1:before :focus
:first-letter
:first-line
:first-child
Question : :before
:after
[Link]:first-letter { color:#ff0000; }
h1:before { content:url([Link]); }
[Link]
22 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2 - CSS
2c. CSS 1-2-3
Parmi les ajouts les plus importants :
- Sélecteurs
- Modèle de boîte
- Arrière plans et contours
- Effets de texte
- Transformations 2D/3D
- Animations
- Affichage sur plusieurs colonnes
- Interface utilisateur
[Link]
23 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2f – CSS – Le CSS3
2c-i. Les sélecteurs CSS 1
.class .intro Sélectionne tous les éléments avec class="intro"
#id #firstname Sélectionne l'élément avec id="firstname"
element p Sélectionne tous les éléments <p>
element,element div, p Sélectionne tous les éléments <div> et tous les
éléments <p>
element element div p Sélectionne tous les éléments <p> contenus dans
éléments <div>
:link a:link Sélectionne tous les liens non visités
:visited a:visited Sélectionne tous les liens visités
:active a:active Sélectionne le lien en cours
:hover a:hover Sélectionne les liens quand la souris survole
:first-letter p:first-letter Sélectionne la première lettre de chaque élément
<p>
:first-line p:first-line Sélectionne la première ligne de chaque élément
<p>
[Link]
24 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2f – CSS – Le CSS3
2c-ii. Les sélecteurs CSS 2
* * Sélectionne tous les éléments
element>element div>p Sélectionne tous les élements dont le parent est
un élément <div>
element+element div+p Sélectionne tous les élements placés
immédiatement après un élément <div>
[attribute=value] [target=_blank] Sélectionne tous les éléments avec
target="_blank"
[attribute=~value] [title~=fleur] Sélectionne tous les éléments avec title qui
contient le mot ="fleur"
[attribute|=value] [lang|=fr] Sélectionne tous les éléments dont l'attribut
lang commence par "fr"
:focus input:focus Sélectionne l'élement en cours qui a le focus
:first-child p:first-child Sélectionne chaque élement <p> qui est le premier
enfant de son parent
:before p:before Sélectionne le contenu qui est avant chaque
élément <p>
:after p:after Sélectionne le contenu qui est avant chaque
élément <p>
:lang(langue) p:lang(it) Sélectionne tous les éléments <p> avec l'attribut
lang = ”it” (Italien)
[Link] 25 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2f – CSS – Le CSS3
2c-iii. Les sélecteurs CSS 3
element1~element2 p~ul Éléments <ul> précédés par <p>
[attribute^=value] a[src^="https"] Attribut src commence par "https"
[attribute$=value] a[src$=".pdf"] Attribut src finit par ".pdf"
[attribute*=value] a[src*="w3schools"] Attribut src contient "w3schools"
:first-of-type p:first-of-type <p> qui sont les premiers de leurs parents
:last-of-type p:last-of-type <p> qui sont les derniers de leurs parents
:only-of-type p:only-of-type <p> qui sont unique de leurs parents
:only-child p:only-child <p> qui sont seul enfant de leurs parents
:nth-child(n) p:nth-child(2) <p> qui sont les 2è fils de leurs parents
:nth-last-child(n) p:nth-last-child(2) <p> 2è fils en partant par la fin
:nth-of-type(n) p:nth-of-type(2) Les seconds <p>
:nth-last-of-type(n) p:nth-last-of-type(2) Les seconds <p> en partant de la fin
:last-child p:last-child <p> derniers éléments de leurs parents
:root :root L'élément racine du document
:empty p:empty Tous les <p> qui n'ont pas d'enfants
:target #news:target L'élément actif #news
:enabled input:enabled Tous les <input> enabled
:disabled input:disabled Tous les <input> disabled
:checked input:checked Tous les <input> cochés
:not(selector) :not(p) Tous les éléments qui ne sont pas un <p>
::selection ::selection Partie sélectionné par l'utilisateur
26 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2b – CSS – Les sélecteurs
2c-iv. Hiérarchie des sélécteurs
3 façons différentes :
1 - Feuille de style externe
2 - À l'intérieur du document lui même <head>
3 - À l'intérieur d'un élement
Ordre d'importance : 3 – 2 – 1
<head>
<style type="text/css">
h2 { color: #555; text-align: center; font-size: 14pt; }
</style>
</head>
<body>
<h2 style="text-align: right;">Mon entête</h2>
</body>
[Link] 27 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2 - CSS
2d. Tailles et couleurs
<head>
<style type="text/css">
h1 { color: red; }
h2 { color: #00F; }
p { color: rgb(0,255,0); }
</style>
</head>
<body>
<h1>Eléments h1 rouges</h1>
<h2>Eléments h2 bleus</h2>
<p>Textes des paragraphes verts.</p>
</body>
28 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2f – CSS – Le CSS3
2e. Les fontes
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family:myFirstFont;
}
[Link]
29 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2f – CSS – Le CSS3
2f-i. Les fontes
<link
href=''
rel='stylesheet' type='text/css' />
30 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2f – CSS – Le CSS3
2f-ii. Les effets de texte
<style>
h1 {
text-shadow: 5px 5px 5px #FF0000;
}
</style>
<h1>L'effet text-shadow !</h1>
[Link]
31 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2f – CSS – Le CSS3 – Les effets
2f-iii. Les arrondis et ombres
div {
border:2px solid #a1a1a1;
box-shadow: 10px 10px 5px #888888;
border-radius:25px;
}
<div>Propriété border-radius</div>
<div>Propriété box-shadow</div>
[Link]
32 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2f – CSS – Le CSS3 – Les effets
2f-iv. Les transitions
div { div:hover {
width:100px; width:200px;
background:red; }
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
[Link]
33 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2f – CSS – Le CSS3
2g. Les modèles de boîte
Problèmes de compatibilité entre navigateurs
Versions <= IE8 : width inclut padding et border.
Fix : <!DOCTYPE html>
[Link] 34 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2 - CSS
2h. Blocs : positionnement
Positionnement CSS sert à 4 choses :
- position de l'élément
- priorité d'affichage
- que faire si un élément est trop gros
Position : top bottom left right
Position : fixe / relative
[Link]
35 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
1 – HTML
2g. Types ”inline” et ”block”
Block = en ”bloc”, largeur maximum par
défaut. Redimensionnement possible
(width, min-width...)
Inline = ”en ligne” = contaténer dans la
mesure du possible
[Link]
[Link] 36 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2f – CSS – Le CSS3 – Les effets
2f-iv-3. Les animations
@keyframes monani {
div {
from {background: red;}
animation: monani 5s;
to {background: yellow;}
-webkit-animation: monani 5s;
}
}
/* Safari et Chrome */
@-webkit-keyframes monani {
from {background: red;}
to {background: yellow;}
}
[Link]
37 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2f – CSS – Le CSS3 – Les effets
2f-iv-4. Les transformations 2D
div {
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(30deg);
/* IE 9 */
-ms-transform:rotate(30deg);
/* Safari et Chrome */
-webkit-transform:rotate(30deg);
}
<div>Hello</div>
[Link]
38 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2f – CSS – Le CSS3 – Les effets
2f-iv-4. Les transformations 3D
div {
transform: rotateX(120deg);
/* Safari + Chrome */
-webkit-transform: rotateX(120deg);
}
div {
transform: rotateY(130deg);
/* Safari + Chrome */
-webkit-transform: rotateY(130deg);
}
[Link]
39 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2f – CSS – Le CSS3
2h. Les médias queries
La spécification CSS3 Media Queries définit les techniques
pour l'application de feuilles de styles en fonction des
périphériques de consultation utilisés pour du HTML. On
nomme également cette pratique Responsive Web Design,
pour dénoter qu'il s'agit d'adapter dynamiquement le design
à l'aide de CSS.
[Link]
40 / 41
HTML5, CSS3, PHP5, Javascript, AJAX
2 - CSS
2g. Le responsive design
La spécification CSS3 Media Queries définit les techniques
pour l'application de feuilles de styles en fonction des
périphériques de consultation utilisés pour du HTML. On
nomme également cette pratique Responsive Web Design,
pour dénoter qu'il s'agit d'adapter dynamiquement le design
à l'aide de CSS.
[Link]
41 / 41
