Problème à signaler:


Télécharger Tutoriel a propos du translation programmation web



★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :

Tutoriel a propos du translation programmation web




Programmation Web

Introduction

 

n Le World-Wide Web (ou WWW, ou Web) 

–    Très grand système d’information 

•   réparti sur un ensemble de sites connectés par le réseau Internet

•   constitué de documents hypertextes v textes, images, sons, videos, etc. 

–    Chaque site propose des documents qui sont transmis sur le réseau par l’intermédiaire d’un programme serveur

–    Ce programme serveur dialogue avec un programme client qui prend le plus souvent la forme d’un navigateur

Le Web

n Le dialogue

–    Le dialogue entre un programme serveur et un programme client s'effectue selon des règles précises qui constituent un protocole

•   Le protocole du Web est HTTP

–    D'autres protocoles sont également utilisés

•   FTP pour la transmission de fichiers

© A. Belaïd

L'architecture utilisée

n Client / Serveur 

–    Un site est constitué, matériellement, d’un ordinateur connecté à Internet, et d’un programme tournant en permanence sur cet ordinateur, le serveur

–    Le programme serveur est en attente de requêtes transmises à son attention sur le réseau par un programme client

–    Quand une requête est reçue, le programme serveur

•   l’analyse afin de déterminer quel est le document demandé

•   recherche ce document 

•   et le transmet au programme client

–    Apache est le serveur HTTP le plus utilisé

Architecture Client Serveur

n Architecture web

– Un petit démon (programme : httpd) attend les requêtes pour les analyser

 

Le démon HTTPD

n Requête au niveau du client

–    Le client spécifie un fichier comme par ex. ceci : 

<a href=""> Fichier</a>

–    qui indique en fait :

1.     La machine sur laquelle se trouve le fichier:

2.     le "path" ou chemin pour atteindre le fichier: 

3.     le "protocole": http

–    Ceci se traduit en interne par une requête GET avec des paramètres précis indiquant le serveur, le port… sur lequel il faut mettre les informations

Suite à cette requête, 

–    le browser va ouvrir un socket TCP (structure de communication entre serveurs, avec un numéro d'IP) vers le serveur dont l'adresse est donnée par:

•   host :

•   port : 80 (port par défaut du serveur HTTP)

–    et écrire la requête sur le socket

n Ensuite,

– Le browser va attendre la réponse du serveur – La réponse comprendra deux parties : 

1.   un HEADER 

2.   données du fichier proprement dit, avec indication du contenu par le paramètre : Content-Type – Exemple : 

• Content-Type : text/html; charset=ISO-8859-1

Le rôle du Content-Type

–    La manière dont le browser va présenter le contenu du fichier retourné dépend du "Content-Type"

–    Pour du HTML avec "Content-type: text/html" 

•   Le fichier devra être formaté  

–    Pour du texte pur (text/html)

•   le fichier sera affiche tel quel

–    Pour des images ou du son

•   le browser devra faire appel à divers PLUG-IN spécialisés chacun dans un type de fichier

Le serveur HTTP

–    C'est un simple programme qui ouvre un "Server Socket" sur le port 80 et attend des connexions de la part des clients

–    A chaque ouverture de socket, un serveur crée un Thread (un processus, un exécutable..;) distinct qui lit la commande et en extrait le 'path' pour trouver le nom du fichier à retourner

–    Dans le cas normal (fichier existant et accessible en lecture), le serveur répond en écrivant sur le socket le HEADER suivi du contenu du fichier; et finalement, il ferme le socket


Vers une architecture orientée davantage vers les services

n Le protocole CGI (Common Gateway Interface)

– On a fait un ajout minime à HTTP pour permettre l'implantation d'une relation client/serveur plus élaborée où les requêtes comprennent des paramètres et les fichiers retournés sont générés dynamiquement suite à l'exécution de programmes

n  Comment cela se passe avec le CGI ?

–    On peut indiquer que le fichier spécifié dans la requête GET ne doit pas être retourne tel quel; 

•   mais plutôt que 

–    c'est un PROGRAMME qui doit être exécuté et que c'est son OUTPUT qui doit être retourné

–    On peut aussi donner des paramètres ou des données qui  seront passés au programme

–    Exemple

?a=1 &b=tutu

•   Les paramètres sont après le ? et le &

–    Il y a donc une réelle collaboration entre le HTTPD et le CGI

•   pour se passer les paramètres en respectant les conventions

 

n  L'architecture (on reviendra dessus plus tard)


La technologie dédiée à la  construction d'applications Web

n AJAX (Asynchronous Javascript and XML)

– Manière de construire des applications Web et des sites web dynamiques basés sur diverses technologies Web ajoutées aux navigateurs

• JavaScript, CSS, XML, DOM et XMLHttpRequest 

–    Les applications Ajax fonctionnent sur tous les navigateurs Web qui mettent en œuvre les technologies décrites précédemment

Intérêt de la technologie Ajax

–    Une application web permet à l'utilisateur de naviguer dans son application et de faire des mouvements : 

• envoi de formulaires, navigation, etc. 

– Dans une application qui n'utilise pas la technologie Ajax

•   A chaque mouvement, une requête est envoyée au serveur HTTP, qui l'interprète et renvoie une nouvelle page à l'utilisateur (ces requêtes sont dites

«synchrones »)

•   Ce mouvement conduit au rechargement intégral de la page, d'où rallongement du temps de réponse

– Une application qui utilise la technologie Ajax

• envoie des requêtes au serveur HTTP pour récupérer uniquement les données nécessaires (ces requêtes sont dites « asynchrones »)

© A. Belaïd

Intérêt de la technologie Ajax (suite)

– C'est ce qui permet d'être réactif et donc rapide

1.     On utilise les feuilles de style (CSS3) pour afficher les nouvelles informations reçues par le serveur

è Des sélecteurs sont mis en alerte pour afficher ce

qu'il faut

2.     On utilise JavaScript côté client pour interpréter la réponse et effectuer les traitements nécessaires

è De ce fait, l'application est à chaque fois focalisée sur ce qui est nouveau à traiter

© A. Belaïd



 
 

Comment cela fonctionne ? (3)

–    Pour recueillir des informations sur le serveur, XMLHttpRequest dispose de deux méthodes :

•   open : établit une connexion

•   send : envoie une requête au serveur

–    Les données fournies par le serveur seront récupérées dans les champs de l'objet XMLHttpRequest :

•   responseXml pour un fichier XML ou

•   responseText pour un fichier de texte brut

Applications Web

n Rôle de XML

–    Pour transférer les données entre le JavaScript et PHP par exemple, on a besoin d'adopter des conventions, une sorte de protocole respecté des deux côtés, pour que JavaScript puisse interpréter ce qui est retourné par le serveur

è c'est XML qui a d'abord été utilisé pour ça

–    Mais aujourd'hui il existe d'autres formats plus simples à utiliser, notamment JSON, qui peuvent remplacer XML


Le Web

n Documents web

–    Les documents échangés sur le Web peuvent être de types très divers

–    Le principal type de ressource est le document hypertexte, un texte dans lequel certains mots, ou groupes de mots, sont des liens, ou ancres, donnant accès à d’autres documents

–    Le langage qui permet de spécifier des documents hypertextes, et donc de fait le principal langage du Web, est HTML

Langages de structuration

HTML4 …HTML5

08/10/2012©A. Belaïd

  HTML

n Définition

–    HTML est un langage de description de contenu

–    Il est le seul qui est interprété par un navigateur Web standard pour produire de l’affichage

–    Il existe d’autres standards plus riches mais marginaux

(XUL par exemple)

–    Le HTML décrit le document et ses constituants


 

n Principes du langage :  – Un langage à balises :

•   Balises à dimension 0 : <br>, <img>

•   Balises à dimension 1 : <a></a>, <p></p>

–    Les éléments ainsi formés peuvent se contenir les uns les autres : 

<html>

 <head>

 </head>

 <body>

 </body>

</html> 

–    Des attributs plus ou moins obligatoires pour préciser des propriétés des éléments : 

<ahref="http:// ">un lien</a>

HTML

n Les balises et le texte 

–    Le texte du document est ce qui est « entre » ou autour des balises 

–    Les balises servent à déterminer la « fonction » du texte dans une structure

–    Exemple

<a href="http://…">ce texte est un lien</a>

–    Les balises peuvent simplement altérer la « forme »

–    Exemple

 <b>en gras</b>, <i>en italiques</i

–    Les primitives premières du HTML ont une sémantique

« documentaire » 

<p>, <h1>, <cite>, <address>, <blockquote>, <ul>, <ol>,

                                           <li>                                                                 24

 

n L’Hypermédia, l’agencement et les échanges

–    Un deuxième jeu important du HTML concerne l’établissement des hyperliens : 

•   <a>, <link>, <base>

–    Un troisième jeu important du HTML concerne la gestion de l’organisation visuelle (l’agencement) : 

•   <table>, <thead>, <tbody>, <tr>, <td>, <colgroup>,

<cols>, <div>, <span>, <iframe>, <frameset>, <frame>

–    Un dernier jeu du HTML concerne la récupération de données à travers des formulaires : 

•   <form>, <input>, <select>, <textarea>, <label>



 HTML

n La constitution du document

–    Un document HTML est un document HTML :

•   <html> </html> – ou pas ? : 

•   <p> </p>

–    Un document est de l’information + de la méta-information :

•   <html><head> meta </head><body>…information </bo dy></html>

•   Le HEAD : sert à enregistrer des informations complémentaires (mots-clefs, feuilles de styles applicables, des scripts à utiliser, des chargements annexes, etc.)

•   Le BODY : contient la structure de la partie « visible » du document

                               26


 HTML

n Les deux écritures

–    La forme sérialisée :

<html><head> meta </head><body> information </b ody></html>

–    La forme « structurée » : 

<html>

  <head>

     meta…

  </head>

  <body>

information…

  </body> </html>

27

 HTML

n La constitution d’un document linéaire

– Un document textuel se construit selon un principe documentaire historique (des titres, des sous-titres et des paragraphes) :

<body>

<h1>Titre 1 : Première partie</h1> <h2>Titre 2</h2>

<p> contenu </p>

<h2>Titre 2</h2>

<p> contenu </p>

<h1>Titre 1 : Deuxième partie</h1>

 HTML

n La constitution d’un document agencé

– Un document agencé utilise des tables ou des blocs

•   La stratégie par table : 

v Convient bien aux interfaces « formelles » et structurées (applications informatiques, applications de gestion, données structurées, données tabulaires).

v A des inconvénients : « Accessibilité », coût de calcul de l’agencement quand trop de tables sont imbriquées

•   La stratégie par bloc : 

v Est issue du monde de la PAO. Elle convient aux informations « scénarisées »

v A des inconvénients : difficulté de lecture de la structure, difficulté de maîtrise du calage graphique, impose la connaissance des « feuilles de style CSS »


n L’agencement en tables

<table>

 <thead>

   <tr>

      <th>Titre 1</th>

      <th>Titre 2</th>

    </tr>  </thead>

 

<tbody>

    <tr>

       <td>

</td>        <td>

       </td>

    </tr>

     <tr>

       <tdcolspan="2">

Cellule fusionnée

TITRE1

TITRE2

   

Cellule fusionnée

</td>

    </tr>

   </thead> </table>


n L’agencement en blocs

<div>

<p> bloc 1 </p> </div>

<div>

<span>Bloc 2</span>

</div>

Bloc 1

Bloc 2

•   Les DIV représentent des éléments

« bloc »

•   Les SPAN représentent une frontière identifiable autour d’un texte « en ligne »

•   Les DIV doivent être agencés à l’aide de primitives de feuille de style :  

<divstyle="width: 100px; height: 80px; position:

relative; left: 30px;">

</div>


HTML

n L’échange de données avec le serveur

–    En réception : réponse à une requête (mode habituel)

–    En émission : envoi de données par

•   l’URL : c'est le mode « GET » dans lequel on passe des variables

•   un formulaire : en « GET » mais plus généralement en « POST », permet de passer des variables issues de saisies d’utilisateur

32


 

n Le formulaire HTML

– Un « élément-bloc » encadrant des champs d'entrée de donnée : 

<formname="formulaire" method="POST" action="">

   Champs de saisie

  <inputtype="submit" name="go_btn" value="zyva!!">

</form>

 HTML

n Les éléments de formulaire :  – Champ de texte :  

<inputtype="text" name="nom" value="valeur initiale">

–    Case à cocher :  

<inputtype="checkbox" name="nom" value="valeur_envoyee" [CHECKED] >

–    Boutons radio :  

<inputtype="radio" name="nom_de_groupe" value="valeur_envoyee" [CHECKED] >

–    Plusieurs radio portant le même nom de groupe fonctionnent en exclusion  

 HTML

n Les éléments de formulaire (suite) : 

–    Liste de sélection :  

<selectname="nom" [MULTIPLE] >

<optionvalue="code">libellé</option>

<optionvalue="code" [SELECTED] >libellé</option> </select>

–    Zones de texte :  

<textareaname="nom" cols="30" rows="8">Contenu initial</textarea> – Champ caché :  

<inputtype="hidden" name="nom" value="valeur">

35


HTML

n La présentation des formulaires

– Elle combine en général les éléments de formulaire et les tables :  

<formname="formulaire" action="">

<tablewidth="100%">

   <tr>

      <tdalign="right">Libellé</td>

   </tr>

   <tr>

      <tdalign="left">

size="30"> <inputtype="text" name="nom"

     </td> </tr>

</table> </form>

Vers HTML5

n HTML4

– Plusieurs tentatives d'amélioration : XHTML… abandonnées

n HTML5

–    Définir un langage unique qui peut être écrit dans la syntaxe HTML et XML

–    Définir des modèles de traitement permettant de favoriser des implémentations interopérables

–    Améliorer le balisage des documents

–    Introduire des APIs pour créer des applications Internet riches (AIR)

n Quoi de neuf chez les balises ?  – Balises visant à structurer le contenu 

•   Utiles pour la navigation et le référencement 

•   Facilitant le travail de l’analyseur pour repérer les éléments  v Barre de navigation, menu, etc.

– Balises de media 

•   Introduction de <video> et <audio> pour le multimédia

v sont une énorme claque à Flash et Silverlight

•   Désormais, c'est au navigateur de gérer les éléments multimédia et de les lire, ce qui optimise l’utilisation des ressources (plus besoin de plugin) 

v permet de contrôler la lecture par du JavaScript, et plein d’autres interactivités 

•   Peuvent être mises en forme avec des CSS è devient simple de faire un lecteur avec un peu de CSS et de JS !


– Balises sémantiques 

•   <mark> permet de « marquer » un texte, comme par exemple des mots recherchés 

•   <time> permet de spécifier un temps donné au navigateur 

•   <meter> spécifie une valeur numérique de mesure quelconque

•   <progress> spécifie une progression

– Balises d’interactivité 

•   <detail> permet de spécifier un détail sur une partie de texte comme une aide ou une définition mais qui ne sera affiché qu’au survol ou sur une autre action 

•   <menu> et <command> : menus interactifs   

– Balise de modélisation de données

•   <datagrid> permet d'insérer une représentation de données en modèle de grille (arbre, tableaux, listes, etc.) 

v Cette balise englobe un élément de liste (<table>, <select>, <ol>/<ul>, etc.) dont elle récupère les données initiales 

•   Il est alors possible en utilisant les méthodes fournies par HTMLDataGridElement de rendre dynamiques ces données, par exemple par des appels AJAX, lors de tri, de filtres, etc. 

– Une balise pour le dessin vectoriel  – Un stockage DOM 

•   <canvas> : éléments graphiques 2D en JS à la volée 

•   DOM a été étendu pour ajouter une méthode de stockage d’informations permettant d'enregistrer des données de manière permanente dans le navigateur 

– La géolocalisation 

• API spécifique permettant aux pages web d'interroger le navigateur sur la position de l'utilisateur



– Des Workers 

• Tâches de fond qui vont s'exécuter en parallèle du programme JavaScript  principal  è mieux gérer la surcharge de JavaScript è plus de problème de ralentissement à cause d’un JS trop gourmand 

n La Concurrence 

–    HTML 5 va surtout concurrencer les plugins de navigateurs, notamment Flash et Silverlight 

•   En fait, l’intérêt des plugins est avant tout de palier un manque, surtout au niveau de la gestion du multimédia dans le web (la vidéo en premier) 

•   Le HTML 5 permet de gérer ça de manière plus légère, plus sémantique et plus accessible 

–    En parallèle au développement de HTML 5, il y a aussi celui du XHTML 2… à suivre 


Quelques éléments du langage

 

n Structure de la page

–    La page représente l’identité ou la signature d’un site

–    Son architecture est importante aussi bien pour l’internaute pour s’y retrouver que pour le navigateur pour localiser l’information

–    Pour le Web2.0, cette architecture est essentielle

–    Plusieurs éléments doivent apparaître comme

•   L'entête pour préciser le thème

•   Le menu pour la navigation

•   Les articles ou billets (pour un blog)

•   Le pied de page contenant quelques données sur l’identité du Webmaster, la date de création ou de mise à jour, etc.

n Structure de la page

–    Avant, tout était structuré de manière identique par des <DIV>

–    HTML5 introduit de nouvelles balises dédiées à la description de la sémantique du contenu :  header, nav, article, section, aside, et footer

                         HTML 4                                  HTML 5 

 

n D’autres exemples de structures

 

                         Romy tetue                               Smashing

Magazine

n D’autres exemples de structures

              Structure d’un billet de blog HTML5 Doctor

n Structure du fichier HTML5

–    Le fichier HTML5 doit démarrer avec cette instruction : 

<!doctype html>

–    montrant qu’il y a qu’un seul doctype

–    Un DOCTYPE (contraction pour "Document Type

Declaration") informe le validateur de la version de HTML que vous utilisez, et doit apparaître en première position dans chaque page web

–    est essentiel pour que le document web s'affiche et fonctionne correctement dans des navigateurs conformes aux normes, comme Mozilla, IE5/Mac, et IE6/Win

–    Attention, ne pas mettre d’URI en fin de balise comme en XHTML et HTML 4 


HTML 5

Retour sur les éléments de structure

n <header>

–    Selon la spécification HTML5, l’élément header représente : 

•   Un groupe d’aide de navigation ou d’introduction

–    Un élément header contient de façon générale les headings

(les éléments h1 à h6 ou l’élément hgroup)

•   Il peut aussi contenir d’autres éléments, comme une table de matières, un formulaire de recherche, ou des logos

n <nav>

– Permet de regrouper une liste de liens de navigation – Convient également pour la navigation dans le site

n Exemple :

<body>

    <header>

        <h1>Wake up sheeple!</h1>

        <p><a href="">News</a> -

        <a href="">Blog</a> -         <a href="">Forums</a></p>

        <p>Last Modified: <time>2009-04-01</time></p>

<nav>

<h1>Navigation</h1>

            <ul>

<li><a href="">Index of al articles </a></li>

<li><a href="">Things sheeple need to               wake up for today</a></li>

<li><a href="">Sheeple we have                managed to wake</a></li>

</ul>

</nav>

    </header>

    <article>

<p> page content would be here </p>

    </article>

    <footer>

<p>Copyright © 2006 The Example Company</p>

<p><a href="">About</a> -         <a href="">Privacy Policy</a> -         <a href="">Contact Us</a></p>

    </footer>

</body>

 

n <footer> :

–    Représente le bas de la section à laquelle il s'applique

–    Un pied contient typiquement une information sur sa section comme son auteur, des liens vers des documents liés, les données de copyright et autres données du même type

n <aside>

–    représente une note, une astuce, un encadré, un extrait, une remarque incidente, ou quelque chose qui est juste en dehors du courant principal du récit

–    On peut utiliser <aside> dans deux contextes

•   le premier est un article 

•   et le second, le site Web lui-même 


 

–    Représente une partie générique d'un document ou d'une application, comme un chapitre par exemple

n <article>

–    Représente une section indépendante d'un document, d'une page ou d'un site

–    Convient pour du contenu comme des nouvelles ou des articles de blog, des messages de forum ou des commentaires individuels

 

n Spécification 

–    Un article doit être structuré de la même manière quelque soit le blog

–    HTML4 le représente plus ou moins bien avec des <div> ce qui n’assure pas toujours sa visibilité : titrage, sections…

–    HTML5 harmonise sa structure et renforce sa sémantique à l’aide de 4 nouvelles balises en plus du <Hx>

•   <article>,   

•   <header>,         <header>

•   <footer>,    heading

•   <time>              <time> (just date) 

 Article text

<footer> (metadata)


Contextes d’utilisation

 

n Ce qui change avec HTML5 

–    La balise a un sens 

–    De plus, ce sens peut varier en fonction des éléments parents :

–    <article> : 

•    représente une section isolable du site, qui peut s’auto-suffire en dehors du contexte de la page

(dans un lecteur RSS par exemple)

•    mais, enfant d’un autre <article>,

è Il représente un commentaire sur cet article

–    <header> : 

•   n’est pas exclusivement réservé à l’en-tête du site ! 

•   à l’intérieur d’un <article>, 

v il sert à repérer ses titres et métadonnées comme la date de publication et le nom de l’auteur  – <footer> : 

•   lui non plus n’est pas réservé au pied de page du site

•   placé dans un <article>, il :

v marque les informations relatives à l’article mais non indispensables, telles que tags et catégories

–    <time>

•   Sert à indiquer une date : a plusieurs attributs

v datetime indique une date à un formatstandardisé

v Si on lui rajoute l’attribut pubdate, on signifie au parseur la date de publication de l’<article> parent

•   En d’autres termes 

v pubdate est un booléen qui indique si la date indiquée par <time> est la date de publication d’un article ou de tout le contenu du <body>


n Exemple de pubdate :

<article>

<header>  

<h1>Viens à ma fête le <time datetime=2010-12-01>1 

                                                 Décembre</time>

                                            </h1>

             <p>Publié le <time datetime=2010-06-20 pubdate>20   juin 2010</time> </p>

</header>  

<p>Je vais organiser une fête à la discothèque </p> </article>

– Comme vous le voyez, il y a 2 dates, pubdate permet de lever l’ambiguïté

 

n Exemple  avec des <header > sémantiquement différents :

<header> <h1>Événements</h1> </header>

<h2><time datetime="2010-04-13">SAMEDI 13 MARS</time></h2> 

<article>

                              <header>

                      <time datetime="2010-04-13T00:19:00+02:00">19h

                      </time>

                      <h3>ELECTION DE MISS MUGUET</h3>

                    </header>

                    <p>Avec le Comité Miss France ….!</p>

</article>

<h2><time datetime="2010-04-13">DIMANCHE

    14 MARS</time>

</h2>

<article>

                    <header>  

            <time datetime="2010-04-13T00:19:00+02:00">19h</time>  

            <h3>autre chose</h3>

                    </header>  

      <p>blablabla</p>

</article> 

La structure d’article

–    Chaque article dans une page peut avoir ses propres <header> et <footer>

–    Ces <header> et <footer> s’ajoutent à ceux principaux de la page

–    On peut les cibler au niveau de la CSS par des sélecteurs adéquat :

•   body>header

•   body>footer

–    et 

•   article>header

•   article>footer

–    La spécification autorise plusieurs footers pour un même élément


La structure d’article

n Ajout de messages et de commentaires aux articles

–    Un article peut contenir en plus du corps, des messages et des commentaires è sous d’autres balises <article>

 

n Exemple :

<article>  <!-- Début du billet-->

   <header>

<h1>Viens à la fête le <time datetime=2010-12-01>1er décembre</time></h1>      <p>Publié le <time datetime=2010-06-20 pubdate>20 juin 2010</time> </p>

   </header>

<p>Je suis à la fête de </p> <!-- Corps de l’article -->

<footer>Publié par Bruce </footer>

<article> <!-- Début commentaire -->

<header>

<p> Commentaire de : <a href="">

Remy Sharp</a> à <time datetime="2010-05-01

 T08:45z">8.45 le 1er mai 2010</time> </p>



</header>

<p>je serai là-bas </p>

</article> <!-- Fin du commentaire-->

<article> <!-- Début commentaire -->

<header>

Commentaire de : <a href="">Patrick Lauke</a> à

<time datetime="2010-05-02T10:45z">10.45 le 2 mai 2010</time>

</header>

<p>Pardon mate </p>

</article> <!-- Fin du commentaire-->

</article> <!-- Fin du billet-->

Table des matières

en vue d’étudier la visibilité du sectionnement

n Construction

–    Il est possible de construire la table des matières d’un fichier

HTML 

è La table des matières sert à renseigner sur la visibilité de la structure du contenu

–    Obtention : 

•   Téléchargez les fichiers suivants :

v

v

•   L’exécution de permet d’avoir un lien que l’on met dans la ligne des favoris de son navigateur

è voir page suivante

•   Ensuite, il suffit de charger le fichier html dans le navigateur, puis de cliquer sur ce lien, ce qui fournit la table des matières


Autre type de contenu : 

Tables des matières

 

Exécution de :           Déplacement de : H50 v0.5.0.62

Autre type de contenu : 

Les sections  

n HTML5 règle les problèmes

1.   L’absence de l’attribut class dans <div> crée des ambiguïtés et ne permet pas de savoir ce que l’on crée 

è remplacé par <section>

2.   La fusion de plusieurs éléments pour définir le contenu est difficile

è HTML5 a résolu ce point par l’apport de balises spécifiques :  

<article>, 

<section>, 

<nav>, <aside>

3.   De plus, en HTML4, tous les titres sont pris en considération dans la TdM, il n’est pas possible de cacher un sous-titre ou un titre secondaire pour mieux révéler une section :

<h1>Justine</h1>

<h2>Les Malheurs de la Vertu</h2> 

                               •    crée la TdM 

1. Justine 

1.1 Les Malheurs de la Vertu 

è HTML5 introduit l’élément <hgroup> qui cache tous les éléments heading sauf le premier du rang le plus élevé  :

<hgroup>

                                                   <h1>Justine</h1>

                                                     <h2>Les Malheurs de la Vertu</h2>

</hgroup>

                               •    Crée la TdM

1. Justine


4.   En HTML4, la section fait partie intégrante de l’ossature du document 

–     mais les documents n’ont pas une structure toujours linéaire

–     certaines sections peuvent être à part (des encadrés, etc.) renseignant sur le contenu

è HTML5 introduit l'élément <aside> pour ça

5.   Enfin, en HTML4, 

–     Il n'existe aucun moyen d'avoir une section contenant des informations connexes non pas au document mais à l'ensemble du site, comme les logos, les menus, la table des matières, ou les droits d'auteur et mentions légales 

è À cette fin, HTML5 introduit trois éléments de sections spécifiques

–     <nav> pour les collections de liens, comme une table des matières 

–     <footer>, 

–     <header> pour plus d'informations concernant le site

Différence entre <section> et <article>

n Question souvent posée

–    Un article

•     est une partie indépendante qui est complète en soi

v   Par ex. un mail dans une liste de mails

v   On peut s’y référer de l’extérieur du site

v   On peut le syndiquer avec une RSS : i.e. suivre son évolution

–    Une section 

•     n’est pas une partie indépendante

•     C’est soit une manière de subdiviser une page en plusieurs sujets soit une manière de sectionner un article en sections

n Les titres <hi> jouent un rôle important pour définir des sections implicites

Ce code HTML définit deux sections de haut-niveau : 

<section>

    <h1>Forest elephants</h1>

<section>     

                                                 <h2>Introduction</h2>     

       <p>In this section, we discuss the lesser known  forest elephants

</section>   

<section>     

                                                 <h2>Habitat</h2>

       <P>Forest elephants do not live in trees but among    them.

</section>

<aside>

                                                 <p>advertising block

</aside>

</section>

<footer>

   <p>(c) 2010 The Example company </footer>

– Cette structuration est bien rendue par la TdM :

1. Section

   1.1 Section

   1.2 Section

   1.3 Section (aside)

2. Section (footer)

Audio et vidéo

n Avantages

–    Le HTML5 apporte un lecteur vidéo standardisé intégré directement au navigateur

–    L'API est encore en développement, mais les principales fonctions sont pleinement supportées par tous les navigateurs récents

–    La balise peut être "décorée" avec du CSS

n Inconvénients

– Toutes les spécifications n'apportent pas tous les avantages apportés par les plugins

• Par exemple, les vidéos ne sont pas protégées contre la copie

 Vidéo

n Syntaxe

                         <video src="movie.mp4"></video>

ou de façon plus détaillée

                         <video>

                              <source src="movie.mp4" type= "video/mp4" />

                         </video>

– La source peut être un lien externe

La Balise Audio

n Syntaxe

                        <audio src="music.mp3"></audio>

– ou de manière plus précise, suivant les codecs :

        <audio>

                                     <source src="music.mp3" type= "audio/mpeg" />

                                 <source src="" type="audio/x-wav"> What

You Feel</source>

                            <source src="" type="audio/ogg">What You 

Feel</source>

        </audio>

 

n Voici un tableau récapitulatif des codecs supportés par les principaux navigateurs

–    Compatibilité des codecs vidéo

OGG      

Chrome, Opera, Firefox 3 et 4

MP4  

Chrome, IE 9, Safari

WebM  

Chrome, Opera, Firefox 4

–    Compatibilité des codecs audio

MP3

Chrome, IE9, Safari

OGG

Chrome, Firefox 4, Opera

WAV

Firefox 4, Opera, Safari


Liste des attributs

n Autoplay :

– Démarre automatiquement la vidéo au chargement de la page – Déconseillé car intrusif et consomme beaucoup de bande p.      <video autoplay >

                   <source src="movie.mp4" type= "video/mp4" />

            </video>

n Controls

–    Barre de contrôle proposée par le navigateur

–    Accessible via le clavier

–    Composée d'un bouton 'play/pause', 'une barre de progression' et 'le contrôle du volume'

            <video controls>

                   <source src="movie.mp4" type= "video/mp4" />

            </video>

n   Loop   ()

–    Passe la vidéo en boucle (cést un booléen)    

                           <video loop >

                             <source src="movie.mp4" type= "video/mp4" />

                           </video>

n   Src   () sur FireFox

–    Affiche une image au cas où la vidéo ne peut pas être chargée

–    En effet, tous les navigateurs ne sont pas en mesure de lire tous les formats vidéo

                           <video src="" >

                             <source src="movie.mp4" type= "video/mp4" />

                           </video>

Personnalisation d’un Lecteur

n Fonctions de l’API 

–    L’API dispose de nombreuses fonctions mises à disposition par défaut, tel que :

–    play()        Démarrer la lecture

–    pause()            Mettre en pause

–    canPlayType() Interroger le navigateur pour déterminer si ce type de fichier peut être joué

–    buffered()  Attribut qui définit l’intervalle entre le début et la fin de la partie tampon (buffer) de votre fichier

–    (Tout ce qui peut s’appliquer aux éléments et aux attributs en général)

n   Vous pouvez également créer vos propres fonctions en JavaScript


n   Exemple : (Chrome)  

                –    Passage par JavaScript

<button onclick="document.getElementById('v1').play()">Play</button>

<button onclick="document.getElementById('v1').pause()">Pause</button>

<button onclick="document.getElementById('v1').volume += 0.25">Volume Up </button>

<button onclick="document.getElementById('v1').volume -= 0.25">Volume Down</button>

<button onclick="document.getElementById('v1').muted = true;">Mute </button>

<button onclick="document.getElementById('v1').muted = false">Unmute </button>

<video id="v1" src="sources_video/video.mp4" controls>

<p>Sorry, your browser does not support the video element.</p> </video>

Le style

n Le style peut s’appliquer de deux manières

–    Interne



<style>

 Selecteurs {propriétés}

</style>

–    Externe

• En ajoutant dans le head un lien à un fichier .css

<link rel=stylesheet href="" />

 

n Rappel des principaux sélecteurs de la CSS1 et la CSS2

–    * : n'importe que élément

–    E : tous les éléments E

–    E[toto] : tout élément E possédant un attribut toto

–    E[toto="titi"] : tout élément E dont l'attribut toto vaut titi

–    E[foo~="bar"]  : tout élément E dont l'attribut toto contient une liste de valeurs séparées par des espaces, une de ces valeurs étant titi. Par exemple div[class ~="toto"] sélectionnera tous les div dont une des classes est toto

–    E[toto|="titi"] : tout élément E dont l'attribut toto est une liste de valeurs sélarées par des tirets et commença par titi. Par exemple div[lang|="fr"] ramènera les div dont l'attribut lang est "fr-FR" ou "fr-CA" ou "fr-BE", etc.

–    E.toto : tout élément E dont la classe est toto. La façon dont la classe est déterminée dépend de la grammaire utilisée. Cést l'attribut class en HTML, mais ça peut être autre chose

–    E#toto : l'élément E dont l'identifiant unique est toto

–    E:lang(fr) : tout élément dont la langue humaine est le français

–    E:first-child : tout élément E premier dans la liste des enfants de son père

–    E::first-line : première ligne de contenu de tout E. Utile par exemple en typographie pour mettre en majuscule la première ligne d'un paragraphe

–    E::first-letter : la première lettre de tout élément E. Pour faire des lettrines par exemple

–    E::before et E::after sont un cas un peu particulier puisqu'ils permettent généralement d'insérer du contenu depuis une CSS avant ou après une balise.

–    E F : tout élément F figurant parmi les descendants de E

–    E > F : tout F fils immédiat de E

–    E + F : tout F immédiatement précédé d'un E

–    E:link : tout élément E source d'un lien qui n'a pas encore été visité

–    E:visited : tout élément E source d'un lien qui a déjà été visité

–    E:focus : utile en HTML pour désigner un élément qui a le focus. Pas sûr que ça serve dans d'autres cas.

–    E:active : idem, tout élément E actif

–    E:hover : idem, tout élément E pendant le survol de la souris

 

n Les nouveaux sélecteurs dans CSS3

– Gestion des espaces de noms

–    Il n'est pas rare qu'un document XML contienne des éléments de plusieurs namespaces

•     Un fichier XUL par exemple pourra également contenir du SVG, du XHTML  

–    On peut désormais restreindre un sélecteur à un espace de nom

–    Il faut pour cela déclarer un alias pour le namespace, puis utiliser la syntaxe alias|selecteur

–    Exemple:

@namespace xhtml url(); 

xhtml|image { border: 1px solid black } 

–    affectera une bordure aux images en XHTML mais pas en XUL

La CSS3

n Nouveaux sélecteurs d'attribut

–    CSS introduit 3 nouvelles méthodes pour sélectionner des éléments en fonction de leurs attributs :

•   E[toto^="titi"] : tout élément E dont l'attribut toto commence par "titi"

•   E[toto$="titi"] : tout élément E dont l'attribut toto finit par "titi"

•   E[toto*="titi"] : tout élément E dont l'attribut toto contient "titi"

–    Exemple

p.example{ margin:0; padding:10px; color:#000; 

}

p.example[title^="ess"]{

color:#fff; background:#333; 

}

–    Appliqué sur : 

<p class="example"> je n'ai pas d'attribut title</p>

  <p class="example" title="comment"> j'ai un attribut title mais il ne commence pas par "ess"</p>

  <p class="example" title="essai"> j'ai un attribut title commençant par "ess"</p>

  <p class="example" title="esson"> j'ai un attribut title commençant par "ess" également</p>

         

n Des pseudos-classes

–    CSS3 voit votre document comme une arborescence DOM dans laquelle vous pouvez vous balader :

•   :root qui désigne la racine d'un document

•   E:nth-child(xxx) : tous les éléments E qui sont le xxx fils de leur père

•   xxx peut être :  

v  un chiffre even ou odd : tous les fils pairs ou impairs, pratique par exemple pour avoir un style appliqué alternativement aux lignes d'une table

v  an+b, avec a et b deux chiffres

v  n prendra toutes les valeurs à partir de zéro. Par exemple 2n représente tous les enfants pairs, 2n+1 tous les enfants impairs. a peut être négatif, et le sélecteur ramènera tous les éléments pour lesquels an+b est positif. tr:nth-child(-n+6) sélectionne les 6 première lignes de toutes les tables du document.

 

–    E:nth-last-child(xxx) reprend le même principe mais en comptant à partir de la fin

–    :nth-last-child(2) sélectionnera tous les avant-derniers éléments

–    :nth-last-child(-n+3) les 3 derniers fils de tout élément

–    E:last-child est le pendant de E:first-child et synonyme de :nth-lastchild(1)

–    E:nth-of-type(xxx) et E:nth-last-of-type(xxx) sélectionnent tous les éléments qui ont xxx - 1 frères de même type quéux avant ou après eux. Par exemple img:nth-of-type(2) sélectionnera toutes les 2° images

–    E:first-of-type et E:last-of-type sont des raccourcis dont je vous laisse deviner le sens

–    E:only-child sélectionne tous les fils uniques

–    E:only-of-type renvoie tous les éléments qui sont seuls de leur type parmi les enfants directs d'un élément

–    E:empty représente tous les éléments qui n'ont pas dénfants (attention, le texte à l'intérieur d'un nœud est un nœud texte)  



   

CSS3

n Transformations

§  Pour utiliser ces fonctions, il faut mettre un préfixe devant le nom de la fonction

§  -webkit pour utiliser les fonctions sous Google Chrome et Apple Safari

§  -moz pour les utiliser sous firefox

§  -o pour Opera - Exemple :

-webkit-transition-property

-moz-transition-duration

-o-transition-timing-function

CSS3

n Transitions

–    Permettre une transition douce entre l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est déclenché

–    Pour définir une nouvelle transition animée, il est nécessaire de préciser au minimum :

•   La ou les propriété(s) à animer

•   La durée de l'animation

Transition

n Propriétés

–    transition-property : précise les propriétés CSS à transformer

–    transition-duration : précise la durée de la transition

–    transition-timing-fonction : précise la fonction de transition à utiliser, le modèle d’interpolation

(accélération, décélération …)

–    transition-delay : précise le retard avec lequel la transition se déclenche

Transition

n Exemples

selecteur

transition-property: color, width; 

}

selecteur

transition-duration: 5s; 

selecteur

transition-delay: 1s; 

}


n Exemple

– Animer la couleur d’un titre :

• /* Fonctionne déjà sur webkit */

-webkit-transition-property: color; 

-webkit-transition-duration: 2s; 

/* Bientôt supporté par Firefox */ 

-moz-transition-property: color; 

-moz-transition-duration: 2s; /*  /* et ceci lorsque ce sera standardisé */  transition-property: color;  transition-duration: 1s; 

 

                                               avant                         après

Transition

n La propriété transition-timing-function

–    Définit le mode de transition parmi :

•   ease : rapide sur le début et ralenti sur la fin

•   linear : la vitesse est constante sur toute la durée de l'animation

•   ease-in : lent sur le début et accélère de plus en plus vers la fin

•   ease-out : rapide sur le début et décélère sur la fin

•   ease-in-out : le départ et la fin sont lents

–    Exemple :

–    Liste des valeurs possibles: cubic-bezier(x1, y1, x2, y2): Les valeurs sont des nombres réels allant de 0 à 1

    ease: Par défaut, correspond à cubic-bezier(0.25, 0.1, 0.25, 1.0). Cela donne un départ et une arrivée ralentis. 

linear: Une fonction linéaire, que l'on peut exprimer aussi par cubic-bezier(0.0, 0.0, 1.0, 1.0). 

ease-in: cubic-bezier(0.42, 0, 1.0, 1.0). Départ ralenti.  ease-out: cubic-bezier(0, 0, 0.58, 1.0). Arrivée ralentie.  ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0). Départ et arrivée ralentis.

n Exemple :


n La propriété transform 

–    permet d'appliquer des transformations sur un élément :

• rotation, décalage, zoom, déformation, perspective

–    Les transformations présentées ci dessous peuvent avoir un point d'origine différent de top right ou 0 0

-webkit-transform-origin: 0 0;

-moz-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0;

n La propriété transform 

Proportionalité

• le scale peut autoriser 2 valeurs ce qui ne permet plus de garder la proportionalité

-webkit-transform: scale(1.5, 0.75);

-moz-transform: scale(1.5, 0.75);

-o-transform: scale(1.5, 0.75); -ms-transform: scale(1.5, 0.75); transform: scale(1.5, 0.75);

n La propriété transform 

Skew

• le skew permet de faire une translation horizontale d'un tag HTML

-webkit-transform: skew(30deg);

-moz-transform: skew(30deg);

-o-transform: skew(30deg); -ms-transform: skew(30deg); transform: skew(30deg);

n La propriété transform 

Translate

• le translate permet de faire une translation d'un tag

HTML

-webkit-transform: translate(10px, 0px);

-moz-transform: translate(10px, 0px);

-o-transform: translate(10px, 0px); -ms-transform: translate(10px, 0px); transform: translate(10px, 0px);


n Les animations complexes sous webkit

– Les navigateurs basés webkit permettent de mettre en place des animations :

 

Transformation

n Exemple : ExpandingCaptionedImages

–    Il s’agit d’agir sur une suite d’images pour leur faire subir différents types de transformations

–    En les survolant, elles bougent

–    En cliquant dessus, elles s’agrandissent

 

105

Autres fonctions

§ box-shadow

§   Permet de créer une ombre portée sur n’importe quel élément de Html



§   Indication du décalage de l’ombre portée, de la force du dégradé ou encore la couleur.

§   Nécessite un filtre pour fonctionner sous IE jusqu’à la version 8

§   Les ombrages sont légèrement différents d’un navigateur à l’autre

box-shadow

.ombrage{

border: 5px solid #fff;

-moz-box-shadow: 8px 8px 12px #aaa;    -webkit-box-shadow: 8px 8px 12px #aaa;

box-shadow: 8px 8px 12px #555;

}

.ombrage{

filter:prgid:DXImageTransform.Microsoft.Shadow(color=‘#aaaaaa’, Direction=135, Strength=12);    zoom: 1;

}

 

La première valeur correspond au taux de rouge

-     La seconde valeur correspond au taux de vert

-     La troisième valeur correspond au taux de bleu

-     La quatrième valeur correspond au taux d’opacité div{  

background-color: rgba(0, 0, 255, 0.5);  

}

 

Le parent alpha correspond à l’opacité

                                                                                                      108


 Opacity

à opacity ne gère qu’une seule valeur, l’opacité

                                                              div{

                                                           opacity: 0.5; }

 

Border-radius

.arrondi{ width: 120px;    height: 50px;

   border: 2px solid #000;

   -moz-border-radius: 10px 75px 10px 10px / 10px 30px 10px 10px;    -webkit-border-radius: 10px 75px 10px 10px / 10px 30px 10px 10px;    border-radius: 10px 75px 10px 10px / 10px 30px 10px 10px; }

 

 Gradient

                            • Pour les moteurs WebKit et Firefox

 

                                            •    Voici le code pour la div de dessus :

margin:10px auto;  width:400px; height:80px; 

background: -webkit-gradient(linear, left top, left bottom, from(#FF0), to(#0FF)); 

background: -moz-linear-gradient(top,#FF0,#0FF);

background:blue;

•Exemple d’interface à essayer :

 

 Conclusion

n Pour le moment, l’utilisation de CSS3 est encore rare car les navigateurs ne supportent toujours pas toutes les applications/fonctions de ce dernier

n A terme, ces dernières pourront être une alternative plus simple que le JavaScript et le Flash



4