https___twitter.com_darmont_lyon2 hashtag #webidsm http_eric.univ-lyon2.frjdarmont_ HTML 5 XHTML 5 Évolution de HTML 4

Actualité du cours
Programmation Web
http://eric.univ-lyon2.fr/~jdarmont/?page_id=449
Master 1 IDSM-Kharkiv
Année 2015-2016
Jérôme Darmont
http://eric.univ-lyon2.fr/~jdarmont/?feed=rss2
https://twitter.com/darmont_lyon2 hashtag #webidsm

http://eric.univ-lyon2.fr/~jdarmont
2 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/
Plan du cours Un peu d'histoire…

HTML : HyperText Markup Language
Langage HTML – Liens hypertextes
– Langage à base de balises
Éléments de design Web
Feuilles de style en cascade (CSS) Objectif : publier sur le World Wide Web (ou WWW,
W3, ou Web) des documents formatés
Langage de script PHP
Issu de SGML (Standard Generalized Markup
Connexion à une base de données (MySQL) Language), langage de définition de langages
Développé par Tim Berners-Lee au CERN (Suisse) en
1990 et utilisé sur le Web depuis
3 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 4 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/
Versions successives de HTML Éléments, balises et attributs

HTML 5 Élément : nom, notion abstraite
HTML 1 XHTML 1.0
HTML 4 en XML
XHTML 5 – Ex. Document HTML : html
HTML 2
Évolution de HTML 4
HTML+ Non XHTML 1.1 Balise : forme concrète d'un élément
HTML3 standards – Ex. de balise ouvrante : <html>
– Ex. de balise fermante : </html>
1990 1995 1997 2000 2001 2003 2008
Attribut : propriété d'un élément (nom, valeur)
– Ex. <a href="http://www.univ-lyon2.fr">
HTML 3.2
XHTML 2
HTML 4 Nom Valeur
Évolution de XHTML 1
Standards W3C Abandonnée en 2009
1
Règles d'écriture XHTML Squelette d'un document HTML
Les noms des balises doivent être écrits en minuscules. <!DOCTYPE html> 
Toute balise ouverte doit être fermée. <html>
Les chevauchements entre balise sont interdits <head>

(documents bien formés). 
</head>
Les noms des attributs doivent être écrits en
minuscules.
<body>
Les valeurs des attributs doivent être entre guillemets 
</body>
doubles.
</html>
En-tête Exemple d'en-tête

Informations qui ne sont pas affichées mais qui sont <head>
utilisées à des fins diverses 
<meta charset="utf-8" />
Titre : <title>…</title>
Métadonnées : <meta /> 
– Ex. Jeux de caractères, auteur, mots-clés, description de la <meta name="Author" content="Jérôme Darmont" />
page… <meta name="Keywords" content="Enseignement,Informatique" />
<meta name="Description" content="Exemple de page HTML" />
Note : Une balise vide peut se noter <balise></balise>
ou <balise />, au choix. 
<title>Exemple de page HTML</title>
</head>
Optimisation des performances Corps du document
Préchargement DNS Éléments de structuration du document

– Ex. <link rel="dns-prefetch" href="//platform.twitter.com"> – Invisibles
– Permettent la mise en page ultérieure du document
Préchargement de lien – Permettent la génération automatique, par ex., d’une table des
– Ex. <link rel="prefetch" href="http://darmont.me/hello.html" /> matières, des figures, etc.
– Ex. <link rel="prefetch" href="http://darmont.me/picture.png" />
Éléments qui apparaissent explicitement à l’affichage
Prérendu de page – Texte
– Ex. <link rel="prerender" href="http://darmont.me/hello.html" /> – Images
– …
2
Structuration du document Titres, paragraphes, séparateurs
Contenu principal : <main> </main>

Titres (headings) : Six niveaux notés h1 à h6
Section : <section> </section> – Ex. <h1>Titre de niveau 1</h1>
Article : <article> </article>
Encadré : <aside> </aside> Paragraphes (séparés entre eux par un espace)
– Ex. <p>Ceci est un paragraphe</p>
Entête : <header> </header>
Pied de page : <footer> </footer> Séparateurs :
Menu de navigation : <nav> </nav> – Retour à la ligne (sans espace) : <br />
Boîte de dialogue : <dialog> </dialog> – Ligne horizontale : <hr />
Autres blocs de texte prédéfinis Formatage de texte
Adresse Texte « appuyé » : <strong>…</strong>

– Ex. <address>5 av. P. Mendès-France </address> Emphase : <em>…</em>
Surlignage : <mark>…</mark>
Citation Police « machine à écrire » : <code>…</code>
– Ex. <blockquote>Mignonne allons voir</blockquote>
En indice : <sub>…</sub>
En exposant : <sup>…</sup>
Texte préformaté
Caractères spéciaux :
– Ex. <pre>Le formatage sera < : < & : &
conservé > : > " : "
à l'écran</pre> espace insécable :
Imbrication des balises Liens hypertextes
 Forme générale : <a href="URI">libellé</a>
<header><h1>Présentation du master IDSM</h1></header>

URI : Uniform Resource Identifier
<article> (anciennement URL : Uniform Resource Locator)
<p>L'<strong>Université Lumière Lyon 2</strong> et – Absolue (adresse complète)
l’<strong>Université Nationale d’Économie de Kharkiv</strong> Ex. http://www.hneu.edu.ua
proposent une formation d'excellence (<em><strong>double diplôme ftp://ftp.ciril.fr
mailto:jerome.darmont@univ-lyon2.fr
de master</strong></em>) en <em>informatique et
statistique</em>.<br /> Ces domaines se développent rapidement, – Relative (à partir du répertoire courant)
tant au niveau de la recherche que dans l'industrie, et offrent de Ex. page_suivante.html
nombreux emplois.</p> rep/page_dans_repertoire.html
</article>
– Exemple : <a href="http://www.univ-lyon2.fr">Université Lyon 2</a>
3
Ancres Images
Permettent un lien vers un endroit précis dans une Formats reconnus :

page Web
Balise : <img src="URI" alt="description" />
Définition dans une page : attribut id – Ex. <img src="lyon2-logo2014.jpg" alt="Logo Lyon 2" />
– Ex. <h1 id="menu">MENU</h1> – Ex. <img src="http://eric.univ-lyon2.fr/~jdarmont/wp-
content/uploads/2015/02/lyon2-logo2014.jpg" alt="Logo Lyon 2" />
Référence depuis la même page

Lien sur une image
– Ex. <a href="#menu">Aller au menu</a>
– Ex.
<a href="http://www.univ-lyon2.fr">
Référence depuis une autre page <img src="lyon2-logo2014.jpg" alt="ULL2" />
– Ex. <a href="page.html#menu">Retour menu</a> </a>
Multimédia Figures
Sons : balise <audio> </audio> Élément de structuration (comme section, article…)
Vidéos : balise <video> </video> Balise : <figure> </figure>
Attributs communs Légende : <figcaption> </figcaption>
– src : URI du contenu Exemple :
– controls : affiche les contrôles du lecteur multimédia <figure>
– autoplay : démarrage dès que possible <img src="tim-berners-lee.jpg" alt="Photo Tim BL" />
– loop : en boucle <video src="test.ogg" controls="controls" muted="muted">
Le format .ogg n'est pas supporté.
– muted : sans son
</video>
<audio src="chord.wav" controls="controls">
Exemple
Le format .wav n'est pas supporté.
<audio src="test.mp3" controls="controls" loop="loop"> </audio>
Le format MP3 n’est pas supporté par votre navigateur. <figcaption>Tout le multimédia de HTML5</figcaption>
</audio>
21 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 22 </figure> Programmation Web http://eric.univ-lyon2.fr/~jdarmont/
Jauges Listes ordonnées et non-ordonnées
Barre de progression Listes à puces : <ul> </ul>

<progress max="100" value="75"></progress> Listes numérotées : <ol> </ol>
Apparence :
Exemple
Barre de mesure <ul>

<meter min="0" max="100" low="10" high="90" <li>1er élément</li>
optimum="50" value="75">75 %</meter> <li>2ème élément</li>
<li>3ème élément</li>
Apparence : variable selon les navigateurs </ul>
4
Listes de définitions Imbrication de listes
Exemple Exemple
<dl>
<dt>1er terme</dt> <ul>
<dd>Définition du 1er terme</dd> <li>Elément non ordonné 1
<dt>2ème terme</dt> <ol>
<dd>Définition du 2ème terme</dd> <li>Sous-élément ordonné 1.1</li>
</dl> <li>Sous-élément ordonné 1.2</li>
</ol>
Résultat à l'affichage </li>
<li>Elément non ordonné 2</li>
1er terme </ul>
Définition du 1er terme
2ème terme
Définition du 2ème terme
Tableaux simples Exemple de tableau

Tableau : Ensemble de lignes elles-mêmes constituées
<table>
de cellules
<caption>Mes totaux</caption>
Définition d'un tableau : <table> </table> <tr>
<th>Jour de la semaine</th> <th>Montant</th> <th>Total</th>
Légende : <caption> </caption> </tr>
<tr>
Définition d'une ligne : <tr> </tr> <td>Lundi</td> <td>456 euros</td> <td>456 euros</td>
</tr>
Définition d'une cellule d'en-tête : <th> </th> <tr>
<td>Mardi</td> <td>200 euros </td> <td>656 euros </td>
Définition d'une cellule normale : <td> </td> </tr>
</table>
Apparence du tableau exemple Tableaux à cellules recouvrantes
Mes totaux
C1 C2 L1
Jour de la semaine Montant Total
Lundi 456 euros 456 euros L12
Mardi 200 euros 656 euros
C12 L2
5
Tableaux à cellules recouvrantes Plan du cours
"Fusion" de cellules (<td> ou <th>)

Langage HTML
Cellule sur plusieurs colonnes : attribut colspan Éléments de design Web
– Ex. <table> <tr> <td>C1</td> <td>C2</td> </tr> Feuilles de style en cascade (CSS)
<tr> <td colspan="2">C12</td> </tr> </table>
Cellule sur plusieurs lignes : attribut rowspan
Connexion à une base de données (MySQL)
– Ex. <table> <tr> <td rowspan="2">L12</td>
<td>L1</td> </tr>
<tr> <td>L2</td> </tr> </table>
Dix erreurs de base à éviter Dix erreurs de base à éviter
Fonds sombres, images de fonds chargées, couleurs Ouvrir de nouvelles fenêtres, des pop-ups, etc.
trop nombreuses
Pages lourdes à charger (contenant des images
Gadgets technologiques (animations, textes qui volumineuses, par exemple)
défilent, sons, Javascripts divers…)
Pages trop larges (scrolling latéral)
Surcharger la page de texte ou d'images :
trop d'information tue l'information Pages trop longues (scrolling vertical)
Absence d'aide à la navigation Requérir de l'utilisateur une configuration particulière

("site optimisé pour tel navigateur en telle résolution")
Liens de couleur non standard
Design « Web 2.0 » * Principe fondamental : la simplicité
Qu’est-ce que le Web 2.0 ? Chaque site / chaque page a un but précis.
L’attention de l’utilisateur n’est pas infinie.

– Développement de la Web économie
Le concepteur doit aider l’utilisateur à trouver
– Interactivité accrue des sites Web (AJAX)
l’information qu’il cherche.
– Web communautaire, réseaux sociaux
Il ne faut pas noyer les informations importantes.
– Nouvelle école de design Web
Minimiser le bruit = économie, simplicité
* D’après webdesignfromscratch.com
6
Comment « faire simple » ? Exemple de simplification
pixels décoratifs
Minimiser le ratio
pixels porteurs d’information
Supprimer tout les éléments non strictement
nécessaires
Essayer des solutions alternatives pour arriver au
même résultat plus simplement
Utiliser les éléments visuel pour communiquer, jamais
pour décorer
Éléments de présentation Éléments de présentation
Centrer le site dans la fenêtre du navigateur Distinguer clairement une section d’entête
(logo ou marque bien visible, zone de navigation)
Limiter le nombre de colonnes à 2 (3 maximum)
Contre-exemple !
Éléments de présentation Éléments de présentation
Identifier clairement les sections de la page Texte en gros caractères

– Utiliser des couleurs (mais danger de distraction de l’utilisateur) – Mise en valeur des informations importantes
– Espacer nettement les sections – Facilité de lecture (accessibilité)
Titres en gras
– Attire l’attention sur les
zones importantes du site
7
Éléments de présentation Navigation
Couleurs vives Délimitation de sections Objectifs : l’utilisateur doit savoir facilement

– Où il se trouve dans le site
Mise en valeur
– Où il peut aller
Dégradés d’éléments importants
– Quelles sont options disponibles sur la page courante
Mise en place d’une
ambiance Menu de navigation global
Textures
– Clairement séparé du contenu
(reflets, transparence…)
Ne pas attirer l’attention – Différencié en termes de couleur et de forme
ailleurs que sur le – Gros, clairement et toujours visible
Icônes contenu – Texte des liens explicite
À utiliser avec parcimonie ! Contenu : Hyperliens bien différenciés du texte normal

Reponsive design Qu’est-ce que le W3C ?
W3C : World Wide Web Consortium

– Organisation internationale indépendante des
éditeurs de logiciels
– http://www.w3.org
Objectif : Développement de standards et de « bonnes

pratiques » du Web
blog.teamtreehouse.com Directeur : Tim Berners-Lee
45 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 46 46 http://eric.univ-lyon2.fr/~jdarmont/
Pourquoi utiliser les standards Pourquoi utiliser les standards

du W3C ? du W3C ?
Éviter la "balkanisation du Web" des années 90 Contrôle qualité (validation des pages Web)
Interopérabilité et portabilité (PDA, téléphones Réduction considérable du volume des documents
mobiles…)
Référencement efficace dans les moteurs de
Accessibilité aux personnes handicapées recherche
Réduction des coûts de développement
Pérennité des documents
Exploitation de la technologie XML (vers le Web
sémantique / Web 3.0) Rétrocompatibilité avec les anciens navigateurs
– Exemple : moteurs de recherche (personnalisation, suggestions,
résumé d’informations…)
8
Accessibilité Accessibilité
Prévoir des en-têtes de ligne et de colonnes dans les

26,4 % de la population française souffre d'une entrave tableaux
dans une activité quotidienne et 10 % est affectée d'un
handicap. (SVM, novembre 2008) Lier chaque champ de formulaire à une légende
Définir des raccourcis clavier
Préceptes d’accessibilité :
Prévoir une alternative HTML aux technologies
Proposer un texte alternatif aux images et aux propriétaires (ex. Flash)
contenus multimédias en général (description, Éviter l’usage des cadres (frames)
transcription…)
Prévenir des changements de langue dans le texte
Utiliser des feuilles de style Expliciter les liens (« page d’accueil » >> « cliquer ici »)
Plan du cours Définition et caractéristiques

Cascading Style Sheets (CSS) :
Langage HTML Feuilles de style en cascade
Éléments de design Web Première spécification par le W3C en 1996
Feuilles de style en cascade (CSS)
Séparation du contenu et de la présentation
Connexion à une base de données (MySQL) Définition de styles génériques pour les balises
Syntaxe différente de HTML
Possibilité de validation automatique
Avantages Définitions de styles
Gestion simplifiée et globale de la présentation d'un Trois localisations possibles (+local au +global)
site
Dans une balise HTML : attribut style
Coûts de développement et de maintenance allégés – Ex. <p style="color: blue; text-align: center;">…</p>
(code plus simple)
Dans une page HTML : balise <style>
Code source allégé – Dans l'en-tête de la page Web (head) :
<style type="text/css">…</style>
Possibilité de présentations différentes selon le profil
utilisateur, la résolution écran… Dans un fichier séparé
– Appel dans l'en-tête de la page Web (head) :
Meilleure accessibilité <link rel="stylesheet" type="text/css" href="feuille_style.css" />
9
Notion de cascade Unités de taille
Imbrication des définitions : la plus locale l'emporte.

Unités absolues
– Ex. Définition de style dans un fichier externe vs. définition
dans une balise – px : pixel
⇒ la définition locale de la balise prévaut – pt : point
Imbrication des balises : le style d'une balise s'applique Unités relatives (à privilégier, cf. Responsive design)
aux balises imbriquées. – em : hauteur de ligne
– Ex. <p>…<em>…</em>…</p> – % : proportion par rapport à la taille de la fenêtre
Si un style est appliqué à <p>, il s'applique à <em>.
Spécification de couleurs Écriture d'une feuille de style
Nom prédéfini : aqua, black, blue, fucshia, green, gray, Feuille de style : ensemble de règles
lime, maroon, navy, olive, purple, red, silver, teal, – Un sélecteur
white, yellow – Des propriétés
– Une valeur pour chaque propriété
Spécification RGB (Rouge Vert Bleu - RVB)
– Ex. Jaune : rgb(255, 255, 0)
Exemple
h1 { color: yellow;
Code RGB hexadécimal font-weight: bold;
– Ex. Jaune : #FFFF00 }
Sélecteurs Classe de style
Sélecteur universel : tous les éléments HTML

– Ex. * { color: blue; } Sélecteur défini par l'utilisateur qui permet de dissocier
un style de balises particulières
Style d'une catégorie de balises
– Ex. .style_rouge { color: red; }
– Ex. h1 { color: #FF00FF; } .style_bleu { color: blue; }
p.parag_vert { color: green; }
Style de plusieurs catégories de balises
– Ex. h1, h2, h3, p { color: green; }
Sélecteur associé à un identifiant particulier
Style pour balises imbriquées – Ex. #titre { text-align:center; color: navy; }
– Ex. p em { color: red; } /* Italiques dans un paragraphe */
(Commentaire)
10
Classe de style Application des styles
Utilisation dans une page Web

– Ex. <h1 class="style_rouge">Titre rouge</h1> À une partie d'un paragraphe : <span> </span>
<p class="style_rouge">Texte rouge</p>
– Ex. <p class="style_rouge">Ceci est rouge sauf
<p class="style_bleu">Texte bleu</p>
<span class="style_bleu">ce qui est bleu</span>
<p class="parag_vert">Texte vert</p>
</p>
Application à un ensemble d'éléments : <div> </div> À un élément identifié :

– Ex. <div class="style_bleu">
– Ex. <div id="titre"> … </div>
<h1>…</h1>
<p id="titre"> … </p>
<p>…</p>
<p>…</p>
</div>
Propriétés de couleur Propriétés de typographie
font-family font-family: times;

color color: black; font-family: arial, verdana;
color: #000000;
font-size font-size: 1.5em;
background-color background-color: white;
background-color: #FFFFFF; font-style font-style: italic;
background-image background-image: url("URL");
font-weight font-weight: bold;
background-repeat background-repeat: no-repeat; font-weight: bolder;
background-position background-position: center; text-decoration text-decoration: underline;

text-decoration: line-through;
Propriétés de texte Propriétés de boîte englobante

Boîte
Page Web
text-align text-align: left; margin-left width
text-align: right; Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
padding-top
text-align: center; bla bla bla bla bla bla bla bla bla bla bla
Tatabla blatata
tata bla bla
tatablatata
bla
text-align: justify; bla bla bla bla bla bla bla bla bla bla bla bla bla
tata tata tatablatata
bla bla
tatabla
bla bla bla bla bla bla bla bla bla bla bla
tata tata tata tata tatabla height
bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla
tatabla blatata
tata blatata
bla bla
tatabla
text-indent text-indent: 10pt; bla bla bla bla bla bla bla bla bla bla bla
tatabla blatata
tata blatata…
bla bla bla
text-indent: 15px; bla bla bla bla bla bla bla bla bla blapadding-left
bla bla bla bla bla bla bla
text-indent: 5%; bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
margin-bottom
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla…
11
Propriétés de boîte englobante Propriétés d'hyperlien
width width: 80pt; Hyperliens
height height: 25%; – Ex. a { color: blue; }
padding padding: 5px;
-left, -right, -top, -bottom padding-bottom: 10px;
Hyperliens visités
Boîte
– Ex. a:visited { color: purple; }
margin margin: 10px;
centrée
-left, -right, -top, -bottom margin-left: 10%; Hyperliens survolés (avec le pointeur de souris)
margin-left: auto; margin-right: auto;
– Ex. a:hover { color: white; background-color: blue; }
border border: 2px solid #FF00FF;
-width, -style, -color border-style: dotted; Coins Hyperliens activés
border-radius: 15px; ronds – Ex. a:active { color: purple; }
overflow overflow: auto;
Propriétés de liste Propriétés de tableau

Balise table : border, width,
Listes non-ordonnées border-collapse: collapse…
– list-style list-style: disc;
list-style: circle; Balise caption: caption-side: top;
list-style: square; caption-side: bottom;
– list-style-image list-style-image: url("URL");
Balises tr: height
Listes ordonnées Balises td et th : border, width…
– list-style list-style: decimal; et vertical-align: top;
list-style: upper-roman; vertical-align: middle;
list-style: lower-alpha; vertical-align: bottom;
Exemple de style de tableau Exemple de style de tableau
Style 1 Style 2 HTML

<table>
<tr> <td>C1</td> <td>C2</td> </tr>
<tr> <td>C3</td> <td>C4</td> </tr>
C1 C2 C1 C2 </table>
Style 1 (CSS)
table, td { border: 1px solid black; }
C3 C4 C3 C4 Style 2 (CSS)
table, td { border: 1px solid black; }
table { border-collapse: collapse; }
12
Positionnement flottant Positionnement flottant
Exemple 1 : menu flottant à droite Exemple 1 :

Menu
CSS .menu_jaune { float: right;
background-color: yellow;
width: 100px; }
(style
.menu_jaune) HTML <div class="menu_jaune">
<p>Menu</p>
</div>
100 pixels <div>

</div>
Conteneur
(style .page)
Positionnement flottant 100 % Positionnement flottant
Exemple 2 : pagination en trois colonnes Exemple 2 :
CSS .page { float: left; width: 100%; }

.colonne { float: left; width: 33%; }
Colonne 1 Colonne 2 Colonne 3
(style .colonne) (style .colonne) (style .colonne)

HTML <div class="page"> 
33 % 33 % 33 % <div class="colonne"> </div>
<div class="colonne"> </div>
<div class="colonne"> </div>
</div>
Positionnement absolu Positionnement absolu

1em
Bla bla sur fond vert… 1em CSS .boite_verte { position: relative;
Idem sur fond jaune
Bla bla sur fond vert… background-color: #00FF00;
Bla bla sur fond vert… width: 15em; }
15em .boite_jaune { position: absolue;

top: 1em;
HTML <div class="boite_verte"> right: 1em;
<p>Bla bla sur fond vert…</p> background-color: #FFFF00; }
<div class="boite_jaune">
<p>Idem sur fond jaune</p>
</div>
</div>
13
Exemple de mise en page : Objectif Exemple de mise en page : HTML
<main>
<header>
<h1>Exemple de mise en page</h1>
</header>
<div id="conteneur">
<nav>
<a href="http://www.univ-lyon2.fr">Université Lyon 2</a>
</nav>
<section>
<article>Article 1</article>
</section>
</div>
<footer>
© IDSM
</footer>
<main>
http://blog.teamtreehouse.com/modern-field-guide-responsive-web-design
Exemple de mise en page : CSS Responsive design en pratique

*{ nav {
font-family: arial; float: left; Grilles fluides : utilisation des unités relatives
} width: 200px;
body { background-color: red;
background-color: silver; padding: 1em;
} border-radius: 15px;
main { }
width: 1000px; section {
margin-left: auto; float: left;
margin-right: auto; width: 750px;
background-color: white; background-color: lime;
padding: 1em; margin-left: 1em;
} border-radius: 15px;
header { }
background-color: yellow; article {
text-align: center; background-color: aqua;
padding: 1em; margin: 1em;
}
}
border-radius: 15px;
footer {
– Sidebar : 300px / 960px = 31.25%
background-color: fuchsia;
#conteneur {
width: 100%; text-align: center;
– Main Content : 640px / 960px = 66.67%
padding: 1em;
}
margin-top: 1em;
border-radius: 15px;
– Margin : 20px / 960px = 2.08%
81 Programmation Web } http://eric.univ-lyon2.fr/~jdarmont/ 82 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/
http://blog.teamtreehouse.com/modern-field-guide-responsive-web-design
Responsive design en pratique Plan du cours
Images fluides
Langage HTML
– Taille variable en fonction de la grille fluide
– CSS Éléments de design Web
img { max-width: 100%; } Feuilles de style en cascade (CSS)
Requêtes de média
– Application de style conditionnelle
Connexion à une base de données (MySQL)
– CSS
@media screen and (min-width: 300px) { /* styles pour mobiles */ }
@media screen and (min-width: 600px) { /* styles pour tablettes */ }
@media screen and (min-width: 900px) { /* styles pour ordis */ }
14
Généralités Généralités
PHP : PHP Hypertext Preprocessor Syntaxe du langage PHP proche de celles de C, Perl
Langage de script permettant d'insérer de la ou Java
programmation dans des pages Web
⇒ Pages Web dynamiques Support d'un grand nombre de bases de données
Versions : Support de services internet (IMAP, POP3, NNTP,
– 1994 : Conception par Rasmus Lerdorf HTTP)
– 1995 : Première version publique
– 1995 : PHP/FI Gratuit, fonctionne sous Unix et Windows
– 1997 : PHP 3
– 2000 : PHP 4
– 2004 : PHP 5
Généralités Syntaxe de base
PHP : Langage de script "serveur" comme ASP Passage du HTML à PHP (échappement) : <script
(≠ Javascript, langage de script "client") language="php"> </script> ou <?php ?>
Script exécuté sur le serveur – Ex. <?php echo "Bonjour"; ?>
<html>
<body> Séparateurs d'instructions : ;
<?php echo "Bonjour"; ?>
</html>
</body>
Commentaires
Page web avec script Serveur Web Client
– Ex. // Toute une ligne (façon C++)
<html> # Toute une ligne (façon Shell Unix)
<body>
Bonjour
/* Plusieurs
</html> lignes (façon C) */
</body>
Page web sans script

Variables et types Variables et types

Variables : préfixées par le caractère $ Tableaux : scalaires ou associatifs, création par
PHP ne nécessite pas de déclaration explicite du type assignation des valeurs
de variable ( ). – Ex. $ts[0] = "Chaîne 0"; // Indiçage à partir de 0
$ts[1] = "Chaîne 1";
Types de données : Ex. d'affectation $ta["Dupont"] = 30;
– Nombres entiers : int, integer $i = 1;
– Nombres réels : real, double, float $pi=3.14; Fonctions associées :
– Chaînes de caractères : string $ch="oui"; – Initialisation :
Ex. $notes_s = array(10, 12.5, 15, 8);
Conversion de type : "cast" comme en C $notes_a = array("Valeriia" => 16, "Vadim" => 12);
– Ex. $ipi = (int) $pi; // $ipi est égale à 3
– Nombre d’éléments :
Ex. $n = count($notes_s)
15
Variables et types Constantes
Tableaux à plusieurs dimensions : possibilité de Variables d'environnement

mélanger indices scalaires et associatifs – Ex. $_SERVER["PHP_SELF"]
$_SERVER["SERVER_NAME"]
$_SERVER["HTTP_REFERER"]
– Ex. $matrice[0][0] = 2; $_SERVER["REMOTE_ADDR"]
$msa["Dupont"][0] = 30;
Constantes définies par l'utilisateur

$matrice2 = array( 1 0 0
array(1, 0, 0),   – Ex. define("maChaine", "Valeur de maChaine");
array(0, 1, 0),
array(0, 0, 1));
 0 1 0 define("PI", 3.14159265);
echo "<p>maChaine=" . maChaine . "<br />";
0 0 1
  echo "PI=" . PI . "</p>";
Opérateurs Opérateurs
Opérateurs d'affectation Exemples Concaténation de chaînes de caractères : .

– Affectation simple : $a = 2; – Ex. $ch1 = $ch2 . $ch3;
– Affectation multiple : $a = $b = 2; $ch1 .= "<br />";
– Affectation + opération : $a += 2;
– Pré/post incrémentation/décrémentation : Caractères spéciaux dans les chaînes
++$a; --$a; (échappement)
$a++; $a--;
– Antislash : \\
– Affectation conditionnelle : $max=($a>$b)?$a:$b;
– Dollar : \$
– Guillemets : \"
Opérateurs arithmétiques : + - * / % (modulo)
Opérateurs Affichage
Opérateurs logiques Procédures prédéfinies
– ET : and ou && – Ex. echo "Bonjour !";
– OU : or ou || – Ex. print("Bonjour !");
– OU exclusif : xor – Ces deux procédures sont le seul moyen d'afficher quelque
– NON : ! chose dans le document HTML final.
– Affichage de tableau : print_r($my_array);
Opérateurs de comparaison
– Égalité/Différence : == != Formatage : Utilisation des balises HTML
– Inférieur/Supérieur : < > – Ex. echo "<h1>TITRE</h1>";
– Inférieur ou égal/Supérieur ou égal : <= >=
Saut de ligne dans le code source
– Ex. echo "<h1>TITRE</h1>\n";
16
Affichage du contenu de variables Structures de contrôle
Utilisation de l'opérateur de concaténation

Test : if (expression) instructions
– Ex. echo "PI = " . $pi . "<br />";
[elseif (expression) instructions]
[else instructions]
Directement dans une chaîne
– Ex. echo "PI = $pi<br />";
– Ex. if ($a>$b) echo "A > B";
Résultat de fonction : concaténation obligatoire if ($a>$b) { // Plusieurs instructions

– Ex. echo "Carré de PI = " . carre($pi); echo "A > B";
$b = $a;
}
Structures de contrôle Structures de contrôle

Sélection : switch(variable) {cas}
if ($a>$b) {
echo "A > B"; – Ex. switch($i) {
} else { case 0: echo "i=0"; break;
echo "A <= B"; case 1: echo "i=1"; break;
case 2: echo "i=2"; break;
} }
if ($a>$b) echo "A > B"; switch($ch) {

elseif ($a<$b) echo "A < B"; case "a": echo "A"; $ch="A"; break;
else echo "A = B"; case "b": echo "B"; $ch="B"; break;
case "c": echo "C"; $ch="C"; break;
default: echo "Ni \"a\" ni \"b\" ni \"c\"";
}
Boucle "tant que" : while(expr) {instr} Boucle "pour tout élément" de tableau scalaire
– Ex. $i=1; foreach (tableau as valeur) instructions
while ($i<=10) { echo $i++;
}
– Ex. $tab[0]="Rouge";
Boucle "répéter tant que" : do {instr} while(expr) $tab[1]="Vert";
– Ex. $i=1; $tab[2]="Bleu";
do { echo $i++; foreach ($tab as $val) {
} while ($i<=10); echo "Valeur courante : $val<br />";
}
Boucle "pour" : for (expr1; expr2; expr3) {instr}
– Ex. for ($i=1; $i<=10; $i++) { echo $i;
}
17
Boucle "pour tout élément" de tableau associatif Inclusion de fichiers dans une page
foreach (tableau as clé => valeur) instructions – Fonction require() : Provoque une erreur fatale si le fichier
requis manque (interruption du script)
– Fonction include() : Provoque seulement un avertissement
– Ex. $tab["Rouge"]="#FF0000"; (warning) si le fichier requis manque
$tab["Vert"]="#00FF00"; – Évaluation des fichiers inclus en mode HTML
$tab["Bleu"]="#0000FF";
foreach ($tab as $cle => $val) {
echo "Code de $cle : $val<br />";
Exemples (paramètre des fonctions : une URI)
} – require("mes_fonctions.inc.php");
– include("une_page_web.html");
– include('http://serveur.fr/pg.html');
Fonctions Fonctions
Squelette de définition de fonction Passage de paramètres par référence (paramètres passés
function nom_fn ($p1, $p2, …, $pn) { par valeur par défaut) : &
// Code de la fonction – Ex. function alaligne(&$chaine) {
return val_retour; // Optionnel $chaine .= "<br />";
} }
$ch="Coucou !";
alaligne($ch); // <br /> ajouté à la fin
Exemple
function mon_max ($n1, $n2) { Paramètres par défaut
return ($n1>$n2) ? $n1 : $n2;
– Ex. function cafe($type="expresso") {
} return "Je fais un $type<br />";
}
echo cafe(); // Je fais un expresso
Une fonction doit être définie avant d'être appelée. echo cafe("capucino"); // Je fais un capucino
Visibilité des variables Séparation de PHP et HTML
Variables normales : visibles uniquement à l'intérieur Séparation des tâches de programmation

de la fonction où elles sont définies et de design Web
Maintenance facilitée
Variables globales
– Lecture plus aisée des pages HTML + PHP
– Ex. function exemple_global {
global $vglob; // Visible hors de la fonction – Modification facile du code sans affecter la mise en page et
– vice-versa
Réutilisation de code
Variables statiques
– Ex. function exemple_static { ⇒ Utilisation des fonctions include() et require()
static $vstat; // Conserve sa valeur entre – Ex. Définition dans des fichiers séparés d'en-têtes et de pieds
deux appels à la fonction de page communs à plusieurs pages
18
Plan du cours Principe
Imbrication de requêtes SQL dans du code PHP +
Langage HTML formulaires HTML pour les mises à jour
Éléments de design Web
Feuilles de style en cascade (CSS) SGBD utilisé : MySQL
– Serveur de BD SQL multi-utilisateurs rapide
Langage de script PHP – Développé depuis 1995 (version actuelle : MySQL 5)
Connexion à une base de données (MySQL) – Disponible sous licence GPL ou commerciale
Utilisation de l'extension PHP Data Objects (PDO) :

interface d’accès à une base de données
(divers SGBD supportés dont MySQL ; nécessite PHP 5.1+)
Éléments de langage SQL Éléments de langage SQL
Base de données : ensemble de tables Types de données principaux

– Nombre entier : INT
Table : ensemble d'attributs et leurs valeurs – Nombre réel : FLOAT
– Ex. ETUDIANT (numetu, nom, prenom, datenaiss, note) – Chaîne de caractères : VARCHAR(taille)
– Date : DATE
Interrogation simple
SELECT liste_attributs FROM table
WHERE condition Clé primaire : identifie de façon unique les
– Ex. SELECT nom, prenom FROM etudiant WHERE note>=10 n-uplets (lignes) de la table
– Mot-clé PRIMARY KEY après le type
Création de table
CREATE TABLE nom_table (liste(champ, type))
Éléments de langage SQL Éléments de langage SQL
Insertion d'un n-uplet

INSERT INTO nom_table VALUES (liste_valeurs)
Exemple de création de table – Ex. INSERT INTO etudiant VALUES (123, 'Darmont', 'Jérôme', '15-01-1972', 15.5)
CREATE TABLE etudiant ( numetu INT PRIMARY KEY, Suppression d'un n-uplet
nom VARCHAR(50), DELETE FROM nom_table WHERE condition
prenom VARCHAR(100), – Ex. DELETE FROM etudiant WHERE numetu = 123
datenaiss DATE,
note FLOAT ) Modification d'un n-uplet
UPDATE nom_table SET attribut = valeur WHERE condition
– Ex. UPDATE etudiant SET note = 20 WHERE numetu = 123
19
Éléments de langage SQL PDO : Connexion à une BD
Requête de jointure (multi-table) Connexion

$idconn = new PDO(id_serveur_bd, login_mysql, mot_de_passe);
SELECT liste_attributs – id_serveur = pilote:host=serveur;dbname=nom_bd
FROM table1, table2, … tableN – Ex.
WHERE condition_jointure_t1t2 $c = new PDO("mysql:host=localhost;dbname=darmont", "darmont", "x");
…
AND condition_jointure_tN-1tN
Gestion des erreurs
try { instructions } catch () { traitement_des_erreurs }
– Ex. SELECT * – Ex. try {
// Connexion
FROM etudiant, diplome } catch (PDOException $erreur) {
WHERE etudiant.num_dipl = diplome.num_dipl echo "<p>Erreur : " . $erreur->getMessage() . "</p>\n";
}
PDO : Exécution d’une requête PDO : Exemple pratique

try {
Requête d’interrogation // Connexion
$idconn->query(requête_SQL) $c = new PDO("mysql:host=localhost;dbname=darmont", "darmont", "x");
// Requête d’interrogation
– Ex. $c->query("select nom, prenom from etudiant");
$q = "select nom, prenom from etudiant";
$res = $c->query($q);
Accès au résultat de la requête (ligne par ligne) echo "<ul>\n";
– Ex. foreach($c->query("select nom, prenom from etudiant") as $l) foreach($res as $l)
echo "<li>". $l["nom"] . " " . $l["prenom"] . "</li>\n";
echo $l["nom"] . " " . $l["prenom"] . "<br />\n";
echo "</ul>\n";
echo "<p>" . $res->rowCount() . " résultat(s)</p>\n";
Requête de mise à jour // Requête de mise à jour
$idconn->exec(requête_SQL) $res = $c->exec("update etudiant set note = note + 1") ;
echo "<p>$res ligne(s) modifiée(s)</p>\n";
– Ex. $c->exec("update etudiant set note = note + 1"); } catch (PDOException $erreur) { // Gestion des erreurs
– Retourne le nombre de n-uplets mis à jour echo "<p>Erreur : " . $erreur->getMessage() . "</p>\n";
}
Conversion de jeux de caractères Formulaires HTML

Encodage de caractères Europe de l’Ouest : iso-8859-1 Formulaires : permettent la saisie de données dans une
(sur 2 octets) page Web
Encodage de caractères international : utf-8
(sur 4 octets, plus récent) Définition : <form> </form>
– Attribut action : URI de la page PHP à exécuter après validation
Si un texte contenu dans une BD est à un format et que du formulaire
le serveur Web utilise l’autre : problème (accents…) – Attribut method : méthode de transmission des données (valeurs
– Affichage de type Ã¨ : caractères utf-8 affichés en iso-8859-1 possibles : get et post)
– Attribut enctype : type d'encodage (par défaut application/x-
⇒ $idconn->exec("set names latin1"); www-form-urlencoded ou
– Affichage de type ? : caractères iso-8859-1 affichés en utf-8 multipart/form-data pour envoyer des fichiers)
⇒ $idconn->exec("set names utf8"); Une seule fois, après la
commande de connexion
20
Formulaires HTML Formulaires HTML
Différence entre les méthodes get et post Saisie dans un formulaire : <input />
– get : apparition des valeurs saisies en paramètres de l'URI de – Attribut obligatoire : name, nom de la variable
la page action
Champ texte : <input type="text" size="" />
– post : . valeurs saisies cachées
. quantité de données possible plus importante – Ex. <input type="text" name="nom" size="30" />
Exemple Suggestion de valeurs : <datalist>…</datalist>

<form action="ajout_etu.php" method="post">…</form> – Ex. <datalist id="prop_noms">
Structure d'un formulaire : ensemble de zones de <option value="Dupond">
<option value="Durand">
saisie (groupes de champs)
<option value="Martin">
Groupe de champs : <fieldset> </fieldset> </datalist>
<input type="text" name="nom" list="prop_noms" />
Vérification syntaxique : expressions régulières Bouton radio : <input type="radio" value="" />
– Ex. <input type="email" pattern="[^ @]*@[^ @]*" /> – Ex.
Homme : <input type="radio" name="genre" value="H" />
Champ mot de passe : <input type="password" /> Femme : <input type="radio" name="genre" value="F" />
– Ex. <input type="password" name="passwd" size="8" />
Case à cocher : <input type="checkbox" />
Champ caché : <input type="hidden" value="" />
– Ex.
– Ex. <input type="hidden" name="numetu" value="10" /> choix 1 : <input type="checkbox" name="choix1" />
choix 2 : <input type ="checkbox" name="choix2" />
Fichier : <input type="file" />
– Ex. <input type="file" name="Fichier_téléchargé" />

Boutons de commande
– Attribut type = submit | reset : validation ou réinitialisation du Liste déroulante : <select> </select>
formulaire – Attribut name : nom de la variable choix
– Attribut value : légende du bouton – Balise <option> </option> : élément de la liste
– Ex. <input type="submit" name="Valider" value="Valider" /> – Attribut selected de <option> : choix par défaut
<input type="reset" name="Annuler" value="Annuler" />
– Ex. <select name="annee">
<option>Licence</option>
Zone de texte long : <textarea> </textarea> <option selected="selected">M1</option>
– Attribut name : nom de la zone de texte <option>M2 professionnel</option>
– Attributs rows et cols : nombre de lignes / colonnes <option>M2 recherche</option>
– Ex. <textarea name="texte" rows="10" cols="60"> </select>
</textarea>
21
Options d'accessibilité (navigation alternative) 

<form action="ajout_etu.php" method="post"> <fieldset>
Description de champ : <label> </label> <p> Nom : <input type="text" name="nom" size="50" /> </p>
– Ex. <label for="id_nom"> <p> Âge : <input type="text" name="age" size="2" /> </p>
Nom : <input type="text" id="id_nom" name="nom" /> <p> Année : <select name="annee">
</label> <option>Licence</option>
<option selected="selected">M1</option>
Légende de zone de saisie : <legend> </legend> <option>M2</option>
– Ex. <fieldset> </select> </p>
<legend>État civil de l'étudiant</legend> <input type="hidden" name="action" value="ajout" />
… <p> <input type="reset" value="Annuler" />
</fieldset> <input type="submit" value="Valider" /> </p>
</fieldset> </form>
Exploitation des données Mise à jour d'une base de données

d'un formulaire avec PHP avec PHP
Dans la page cible (Ex. ajout_etu.php) <?php // Suite de l'exemple : document ajout_etu.php
– Tableaux associatifs $_GET[] et $_POST[] $c = new PDO("mysql:host=localhost;dbname=darmont",
– Permettent d'accéder aux valeurs transmises par les "darmont", "x");
méthodes get et post des formulaires, respectivement
Exemple $nom = $_POST["nom"];

<?php $age = $_POST["age"];
echo "<p>L'étudiant " . $_POST["nom"];
echo " (" . $_POST["age"] . " ans)"; $annee = $_POST["annee"];
echo " est en " . $_POST["annee"] . ".</p>";
?>
$requete = "insert into etudiant values ('$nom', $age, '$annee')";
Cas particuliers : case à cocher (valeur "on" si cochée) $resultat = $c->exec($requete);
et fichiers if ($resultat) echo "<p>Insertion effectuée</p>";
?>
Téléchargement de fichier Téléchargement de fichier
Étape 1 : formulaire dans une page HTML Variables disponibles dans la page cible
– Ex. – $_FILES["monfichier"]["name"] : nom original du fichier
<form action="telechargement.php" method="post" – $_FILES["monfichier"]["size"] : taille du fichier
enctype="multipart/form-data" /> – $_FILES["monfichier"]["tmp_name"] : nom temporaire du fichier sur la
<fieldset> machine serveur
<input type="hidden" name="MAX_FILE_SIZE" value="50000" />
Fichier : <input name="monfichier" type="file" />
<input type="submit" value="Télécharger" /> Exemple de code dans la page telechargement.php
</fieldset> $destination = "/home/jd/public_html/" . $_FILES["monfichier"]["name"];
</form> $res = move_uploaded_file($_FILES["monfichier"]["tmp_name"],
$destination);
if ($res) echo "<p>Fichier téléchargé avec succès</p>";
Étape 2 : traitement à l'aide de PHP else echo "<p>Erreur : " . $_FILES["monfichier"]["error"] . "</p>";
22
Transmission de variables Transmission de variables
d'une page PHP à une autre d'une page PHP à une autre


Exemple : On dispose du nom et de l'age du visiteur de
la page courante.php dans les variables $nom et $age. 
On souhaite les transmettre à la page suivante.php. <form action="suivante.php" method="post"> <fieldset>
<input type="hidden" name="nom" value="<?php echo $nom; ?>" />
<input type="hidden" name="age" value="<?php echo $age; ?>" />
Méthode 1 : Utiliser les champs cachés d'un formulaire <input type="submit" value="Envoyer" />
</fieldset> </form>
Méthode 2 : Ajouter des paramètres à l'URI de la page 

cible <a href="suivante.php?nom=<?php echo $nom; ?>&age=
<?php echo $age; ?>">Envoyer</a>
Transmission de variables
d'une page PHP à une autre Sessions
<?php // suivante.php
Objectif : Stockage de variables lors de la navigation
// Méthode 1 sur plusieurs pages Web successives
$nom = $_POST["nom"];
$age = $_POST["age"];
Utilisations courantes :
– Identification des visiteurs d'un site par login et mot de passe
// Méthode 2
stockés dans une base de données
$nom = $_GET["nom"];
– Gestion du profil des utilisateurs
$age = $_GET["age"];
– …
?>
Sessions Sessions
 <?php
<?php session_start(); ?> session_start();
<!DOCTYPE html> // Enregistre la valeur de $nom dans la variable de session s_nom
<html> $_SESSION["s_nom"] = $_POST["nom"];
<head> <title>Session 1</title> </head> ?>
<body> <!DOCTYPE html>
<form action="session2.php" method="post« > <html>
<fieldset> <head> <title>Session 2</title> </head>
Votre nom : <input type="text" name="nom" /> <body>
<input type="submit" value="Valider" /> <p>Identifiant de session : <?php echo session_id(); ?><br />
</fieldset> Nom de session : <?php echo session_name(); ?></p>
</form> <p>Bienvenue sur ma page Web, <?php echo $_SESSION["s_nom"]; ?>.<br />
</body> <a href="session3.php">Page suivante</a>.</p>
</html> </body>
</html>
23
Sessions Sessions
<?php session_start(); ?> <?php
<!DOCTYPE html> session_start();
<html> $_SESSION["s_nom"] = FALSE; // Suppression de la variable de session
<head> <title>Session 3</title> </head> ?>
<body> <!DOCTYPE html>
<p>Es-tu toujours là, <?php echo $_SESSION["s_nom"]; ?> ?<br /> <html>
<a href="session4.php">Détruire la variable de session</a> ou <head> <title>Session 4</title> </head>
<a href="session5.php">clore la session</a> ?</p> <body>
</body> <p>Es-tu toujours là ?
</html> <?php if ($_SESSION["s_nom"]) echo "Oui.";
else echo "Non."; ?>
<br /><a href="session5.php">Clore la session</a>.</p>
</body>
</html>
Sessions Plan du cours

<?php
session_start(); Langage HTML
session_destroy(); // Destruction de la session
?> Éléments de design Web
<!DOCTYPE html>
<html>
Feuilles de style en cascade (CSS)
<head> <title>Session 5</title> </head> Langage de script PHP
<body>
<p>Session terminée.</p> Connexion à une base de données (MySQL)
</body>
</html>
24

Langue

Bienvenue sur Scribd !

https___twitter.com_darmont_lyon2 hashtag #webidsm http___eric.univ-lyon2.fr__jdarmont_ HTML 5 XHTML 5 Évolution de HTML 4

Transféré par

Informations du document

Date du transfert

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Description :

Droits d'auteur :

https___twitter.com_darmont_lyon2 hashtag #webidsm http___eric.univ-lyon2.fr__jdarmont_ HTML 5 XHTML 5 Évolution de HTML 4

Transféré par

Description :

Droits d'auteur :

Titres liés

Actualité du cours

https://twitter.com/darmont_lyon2 hashtag #webidsm

Plan du cours Un peu d'histoire…

3 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 4 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Versions successives de HTML Éléments, balises et attributs

5 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 6 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Les chevauchements entre balise sont interdits <head>

En-tête Exemple d'en-tête

Optimisation des performances Corps du document

Préchargement DNS Éléments de structuration du document

11 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 12 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Contenu principal : <main> </main>

13 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 14 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Autres blocs de texte prédéfinis Formatage de texte

Adresse Texte « appuyé » : <strong>…</strong>

15 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 16 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Imbrication des balises Liens hypertextes

Forme générale : <a href="URI">libellé</a>

<header><h1>Présentation du master IDSM</h1></header>

Permettent un lien vers un endroit précis dans une Formats reconnus :

Référence depuis la même page

19 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 20 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Jauges Listes ordonnées et non-ordonnées

Barre de progression Listes à puces : <ul> </ul>

Barre de mesure <ul>

21 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 24 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Tableaux simples Exemple de tableau

Apparence du tableau exemple Tableaux à cellules recouvrantes

29 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 30 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

"Fusion" de cellules (<td> ou <th>)

31 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 32 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Dix erreurs de base à éviter Dix erreurs de base à éviter

Absence d'aide à la navigation Requérir de l'utilisateur une configuration particulière

Design « Web 2.0 » * Principe fondamental : la simplicité

L’attention de l’utilisateur n’est pas infinie.

35 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 36 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

37 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 38 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Éléments de présentation Éléments de présentation

39 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 40 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Éléments de présentation Éléments de présentation

Identifier clairement les sections de la page Texte en gros caractères

41 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 42 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Couleurs vives Délimitation de sections Objectifs : l’utilisateur doit savoir facilement

À utiliser avec parcimonie ! Contenu : Hyperliens bien différenciés du texte normal

Reponsive design Qu’est-ce que le W3C ?

W3C : World Wide Web Consortium

Objectif : Développement de standards et de « bonnes

blog.teamtreehouse.com Directeur : Tim Berners-Lee

45 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 46 46 http://eric.univ-lyon2.fr/~jdarmont/

Pourquoi utiliser les standards Pourquoi utiliser les standards

Prévoir des en-têtes de ligne et de colonnes dans les

Plan du cours Définition et caractéristiques

51 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 52 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Avantages Définitions de styles

Imbrication des définitions : la plus locale l'emporte.

55 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 56 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Spécification de couleurs Écriture d'une feuille de style

57 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/ 58 Programmation Web http://eric.univ-lyon2.fr/~jdarmont/

Sélecteurs Classe de style

Sélecteur universel : tous les éléments HTML

Utilisation dans une page Web

https___twitter.com_darmont_lyon2 hashtag #webidsm http_eric.univ-lyon2.frjdarmont_ HTML 5 XHTML 5 Évolution de HTML 4

https___twitter.com_darmont_lyon2 hashtag #webidsm http_eric.univ-lyon2.frjdarmont_ HTML 5 XHTML 5 Évolution de HTML 4

Documents similaires à https___twitter.com_darmont_lyon2 hashtag #webidsm http_eric.univ-lyon2.frjdarmont_ HTML 5 XHTML 5 Évolution de HTML 4