Tài liệu MySQL et CSS- P15 docx

Plus le développeur utilise de langages différents, plus il a intérêt à biendocumenter son code, en particulier sur la page elle-même, avec descommentaires, des lignes de séparation, des

Vers la CSS3

Le futur des feuilles de style est la norme CSS3 La feuille de style adésormais des possibilités qui la rapprocheront de la PAO et donc dupapier.

Tous les bricolages et bidouillages nécessaires jusqu’à présent pouraméliorer le rendu des CSS ne sont plus nécessaires car la CSS3 lesincorpore Plus besoin de se creuser la tête pour avoir un affichagehomogène des boîtes sous forme de colonnes, plus besoin de créer desimages spéciales pour arrondir les angles !

La CSS3 est vraiment la version qui mène la CSS à la maturité Il restemaintenant aux navigateurs à se conformer à cette norme en intégrant lesrecommandations du W3C

Les différentes fonctionnalités implémentées rendent le développementdes CSS plus intuitif, ce qui devrait plaire aux graphistes qui n’aiment paspasser trop de temps à développer, et laisser plus de place à la création

8.1 Placer des boîtes

Placer des boîtes devient une tâche naturelle et simple grâce au concept de

modèle (template) Ainsi une page classique se fait facilement.

@media all {

body { display: "aaa"

@media all and (max-width: 500px) {

body { display: "a"

m Figure 8.1 : Résultat

Ici, avec la propriété display_model, il devient possible de créer unmodèle qui donne la disposition des différentes boîtes Chaque boîte estfigurée par une lettre Dans l’exemple précédent, les boîtes sont alignéesverticalement.

<style type="text/css">

body { height: 100%;

display: "a.b.c" (2em)

5em 1em * 1em 10em}

m Figure 8.3 : Résultat

par un espace blanc de 1 em Le rang et la colonne du milieu ne sont pasdéfinis ou définis par un astérisque, ce qui les rend flexibles au niveau deleurs proportions Les mesures, à la fin de la propriété display, donnent

la largeur de chaque colonne, la première de 5 em et la dernière de 10 em

Il est facile aussi d’utiliser des onglets

<style type="text/css">

body {background: silver; color: black}

div.records {display: stack; border: outset}

div.record {display: card}

h2 {display: tab; width: 5em; border: outset;

border: thin solid;

box-shadow: 0.2em 0.2em #CCC;

border-radius: 1em;

}

box−shadow donne les distances par rapport à la boîte, horizontale etverticale

8.2 Autres caractéristiques

Les couleurs

Il est possible de représenter les couleurs avec le système de codage HSL

(Hue, Saturation, Luminance, ou TSL en français pour Teinte, Saturation,

Luminance) Ici encore, c’est une manière plus intuitive de définir unecouleur, en l’éclaircissant, en lui donnant plus de profondeur, etc

m Figure 8.4 : Boîte ombrée à bords arrondis

La propriété transparency permet de définir une transparence de 0.0(transparent) à 1.0 (opaque) Les systèmes de codage de couleurs commeRGB ou HSL deviennent RGBA ou HSLA (A pour Alpha).

p { color: hsla(240, 100%, 50%, 0.5) } /* bleu semi-transparent */

Le son

Les caractéristiques du discours pour les navigateurs audio sont définiespar diverses propriétés pour le type de voix, le débit du discours, le tempsdes pauses

h1, h2, h3, h4, h5, h6 { voice-family: paul;

voice-stress: moderate;

cue-before: url(ping.au) }

p.heidi { voice-balance: left; voice-family: female } p.peter { voice-balance: right; voice-family: male } p.goat { voice-volume: soft }

Les empreintes de voix sont comme les polices de caractères, elles portent

un nom : paul, female, male, etc La voix paul a une accentuationmodérée avec un jingle qui l’introduit, comme les annonces de gare Lavoix de femme des paragraphes de classe heidi vient de la gauche et la

b Figure 8.5 :

Oreille

voix d’homme des paragraphes de classe peter vient de la droite tandisque les paragraphes de la classe goat ont une voix douce.

Les polices

Un certain nombre de caractéristiques étudiées pour la CSS3 concernentles polices et la manière de les afficher font−size−adjust est unecaractéristique qui rapproche les CSS de la PAO avec la même précision

Si la police de caractères demandée n’est pas présente sur la machine del’internaute, une autre police est utilisée ; la différence de taille pour lemême corps est compensée : il s’agit de s’ajuster à la taille du caractèreprévue

L’interprétation progressive (progressive rendering) est un processus qui

consiste en un rendu temporaire des polices en attendant qu’elles soientchargées (à la façon des images) Une fois le chargement depuis le Webopéré, la vraie police remplace le rendu temporaire sans qu’il soitnécessaire de recharger la page

Les fonds

La propriété background−break permet de faire courir une image de fondsur toute une boîte, éventuellement des boîtes intérieures, ou de répétercette image à l’identique sur des boîtes intérieures Il est possible demettre comme fond plusieurs images dans la même boîte

Les propriétés background−clip et background−origin donne le point

de départ de l’image Cette dernière peut être étendue sur toute la page sielle est plus petite que la page en question, ou étendue jusqu’aux borduresavec un effet de relief, ou répétée avec un espace séparateur modulable

8.3 Conclusion

Ces recommandations du W3C sont de plus en plus appliquées

À l’heure actuelle (février 2009), un certain nombre de navigateurs sontcompatibles CSS3 et obtiennent un résultat satisfaisant au test Acid3(http://acid3.acidtests.org/) :

¶ Firefox 3.2a1 (Gecko/20090119) : 93/100

Les développeurs ont intérêt à insérer du CSS3 peu à peu sur leurs sitespour être prêts au moment venu Il est toujours possible de créer deuxfeuilles de styles et d’orienter les visiteurs sur l’une ou l’autre selon laversion de leur navigateur mais cela oblige à développer deux fois, merciMicrosoft !

Les CSS

se marient

bien

Les CSS se marient bien avec le XML, le JavaScript, AJAX

(Asynchro-nous JavaScript And XML, ou XML et JavaScript asynchrones), les

langages dynamiques de script comme PHP ou ASP Ces langagescompensent les manques des CSS ou les incompatibilités des différentsnavigateurs, ou encore renforcent et multiplient les possibilités des CSS.Internet marie bien les langages différents sur une même page, même siparfois ce code hétérogène est plus difficile à maintenir ou même à relire

Ce chapitre va d’abord présenter ces différents langages, afin que vouspuissiez en assimiler quelques notions, puis différentes manières decompenser les manques des CSS ou d’en améliorer les fonctionnalités.Parfois ce sont d’ailleurs les CSS qui améliorent ces langages !

Plus le développeur utilise de langages différents, plus il a intérêt à biendocumenter son code, en particulier sur la page elle-même, avec descommentaires, des lignes de séparation, des lignes blanches

Le langage JavaScript est le plus souvent utilisé car c’est le plus souplepuisqu’il est exécuté par le navigateur lui-même Le navigateur possède

un moteur JavaScript qui fait tourner le script détecté dans le langagesource Ce processus évite de recharger la page pour opérer un change-ment AJAX l’exploite au mieux en le mariant aussi au XML

Côté client, côté serveur

Imaginez que le serveur dans un café prépare vos mations et charge votre commande sur un plateau Vous, en tant que client, vous prenez votre café et vous ajoutez un sucre Vous n’êtes pas obligé de mettre le sucre mais ce sucre est là au besoin Le serveur web va exécuter les commandes qui lui sont destinées (code PHP, ASP…) puis présenter la page web demandée sur un navigateur Le client est le navigateur web qui affiche une page web placée sur le serveur Certaines lignes de code (HTML) lui donnent les directives pour présenter la page Ainsi les liens seront soulignés, les images placées à tel ou tel endroit En plus du HTML, la page sera enrichie de lignes de code JavaScript Ce code sera chargé en mémoire vive en attente d’un événement qui déclenchera son exécution (le passage de

consom-la souris, un clic, une touche enfoncée…).

m Figure 9.1 : PHP

m Figure 9.2 : Processus du langage client

m Figure 9.3 : Processus du langage serveur

Le JavaScript peut se combiner avec de nombreux autres langages sur lamême page avec cette spécificité qu’il est exécuté par le navigateur Cettespécificité lui donne l’avantage de pouvoir réagir immédiatement à uneaction du visiteur sans qu’il soit nécessaire de recharger la page.L’inconvénient est que les fonctions JavaScript sont dépendantes dunavigateur et de sa version Le JavaScript a été inventé sur le navigateurNetscape Puis Microsoft a voulu disposer de son propre JavaScript, enproposant le JScript pour Internet Explorer Malgré les divergences, lesdeux navigateurs s’accordent sur un ensemble de fonctions communes.Ainsi il a été proposé par l’organisme de régulation ECMA plusieursversions du JavaScript.

m Figure 9.4 : Jscript

JavaScript, le cerveau du navigateur

Imaginez le navigateur comme un corps humain Le HTML composeraitles cellules et le code JavaScript serait le cerveau, un lieu ó convergenttoutes les informations et qui réagit en temps réel Imaginez que vous vousbrûliez le doigt Vous l’enlevez immédiatement de l’objet brûlant Lelangage JavaScript de la même façon réagit à des événements quisurviennent dans le document ou le navigateur Il contrơle tous lescomposants du document, son apparence et son contenu, commande lenavigateur, intervient dans les formulaires et dialogue avec le visiteur LeJavaScript est orienté vers la communication humaine :

¶ Il a les yeux par-dessus l’épaule du visiteur et vérifie qu’il ne fait pasd’erreur dans un remplissage de formulaire (vérification deformulaires)

¶ Il met en valeur un texte en mouvement pour être sûr que le regard duvisiteur soit accroché par un événement important (défilement detexte)

m Figure 9.5 : Le cerveau du navigateur

¶ Il élabore un menu en arborescence qui s’escamote et se déplie selon

le désir (menu dynamique)

¶ Il modifie l’aspect de la page à la période des fêtes de fin d’année

¶ Il se souvient du dialogue échangé lors de la dernière visite grâce à un

"tiroir" dans le disque dur du visiteur (cookie)

Si vous avez anticipé une action du visiteur par une commande JavaScript,votre page répond par une réaction Désormais le visiteur attend uneréponse immédiate S’il clique, il ne tolère plus que l’écran soit sourd etaveugle Dans ce monde virtuel, le JavaScript est devenu indispensablepour engager un dialogue avec les visiteurs Même si votre site estmodeste, il est créé pour communiquer Ce n’est pas la peine de mettre de

la poudre aux yeux avec une multitude d’effets, quelques lignes de codepour souhaiter la bienvenue peuvent suffire

Pour le JavaScript, le document est une armoire contenant une ouplusieurs portes, une ou plusieurs étagères, un ou plusieurs tiroirs, unependerie ou pas, etc Ainsi l’objet document contient une ou plusieursfenêtres ouvertes qui correspondent à un ou plusieurs objets window, un

ou plusieurs formulaires, un ou plusieurs liens, etc

Imprimer

Dans votre document HTML, vous pouvez créer un lien pour imprimer,entre les balises HTML<BODY> et </BODY>

<a href="#" onClick="window.print()">

imprimez la page </a>

Si le navigateur a une version égale ou supérieur à Netscape 4 et InternetExplorer 5, le gestionnaire d’impression sera appelé pour imprimer lapage

m Figure 9.7 : Imprimer

Le caractère dièse (#) dans le lien fait référence à la page elle-même etpermet d’activer la méthode print() de l’objet window Le termeonClickdésigne l’événement provoqué par un clic sur le lien.

Le caractère dièse (#)

Le caractère dièse est utilisé en HTML pour un lien interne de

la page ( <a href="#bas de la page">) afin de désigner une ancre

<a name="bas de la page"> Dans le cas du JavaScript, comme le dièse est seul, il désigne la page elle-même Notez que le lien sans objet peut, par exemple, avoir son adresse remplacée aussi par javascrip- t:void(0);, qui lance une fonction sans recharger la page.

Retourner en arrière

De la même façon que précédemment, créez un nouveau lien Ce lienservira à retourner sur la page précédente Ce bouton imite la commande

du navigateur qui permet de revenir en arrière

<a href="#" onClick="history.back()">

revenir à la page précédente </a>

Pour revenir à une page précédente, vous disposez de la méthode back()

de l’objet history, mais vous avez aussi la méthode go(), qui propose

un équivalent

<a href="#" onClick="history.go(-1)">

revenir à la page précédente </a>

Pour recharger la page présente, utilisez la méthode history.go(0).Pour aller deux pages plus loin, employez history.go(2)

Tromper les robots

Vous avez sans doute fait l’expérience de recevoir un flot de courriels,principalement en anglais, envahissant votre boîte d’e-mails Pour créerces messages, appelés pourriels en français ou spam en anglais, il faututiliser des robots qui récoltent les adresses sur les sites

Pour tromper ces robots, vous allez modifier l’apparence du code HTML

à l’aide du JavaScript Vous pourrez insérer ce code n’importe ó dansvotre page, entre les balises HTML<BODY> et </BODY>

Ce script est inséré entre deux balises <script> Ainsi le navigateuridentifiera le code JavaScript à exécuter parmi les balises HTML

m Figure 9.8 : Crypter les adresses email

m Figure 9.9 : Robots & Co

Commencez par créer deux variables en les déclarant accompagnées dumot-clé var et en leur affectant une valeur via l’opérateur = Suivent deuxlignes commençant chacune par deux lignes obliques Ces deux lignessont des commentaires, c’est-à-dire des explications sur le code Leprocesseur JavaScript contenu dans le navigateur n’exécute pas ces lignes.

Confusion entre l’opérateur d’affectation et l’opérateur d’égalité

Il peut exister une ambiguïté entre l’opérateur d’affectation (=), qui attribue une valeur à une variable, et l’opérateur d’égalité (==), qui teste l’égalité entre deux valeurs ou entre une variable et une valeur.

Suivent deux lignes utilisant la méthode write() de l’objet document.Cette méthode permet tout simplement d’écrire du texte dans un docu-ment Au lieu d’écrire du texte littéral, le programme mêle du texte et desvariables Le texte est encadré d’apostrophes, tandis que les variables nedemandent pas tant de précautions Pour concaténer (ou coller) lesvariables et le texte, JavaScript utilise l’opérateur +, qui n’est plus ici lesymbole de l’addition JavaScript détermine le rôle de + en analysant lecontexte : c’est un opérateur d’addition quand les membres de chaque côtésont des nombres

var somme = 2+3;

Vous pouvez aussi aller sur un site qui créera du texte JavaScript aléatoirepour vos adresses e-mail, comme http://aspirine.org/emailcode.php Ne laissez jamais une adresse e-mail nue sur une plage web !

Salutations

Pour que votre site soit un peu plus accueillant, ce petit programme affiche

le message "Bonjour!" au chargement de la page Son exécution reposesur l’événement contenu dans la balise<body> : onLoad

<html>

<head>

<script>

function salutations() { alert("Bonjour!");

Le programme conserve quelques instructions dans une boîte appelée

"fonction", logée dans l’en-tête de la page entre les balises <head> et

</head>, et encadrée par les balises <script> et </script>

Une fonction est déclarée par le mot-clé function et un nom lui estattribué : ici salutations Les parenthèses qui suivent contiennent 0, 1

ou plusieurs arguments, qui seront traités par les instructions internes de

la fonction Dans ce programme, aucun argument n’est nécessaire.Conservez néanmoins les parenthèses Les instructions de la fonction setrouvent entre accolades et chaque ligne se termine par un point-virgule (;) En fait, le point-virgule termine une instruction Si une lignecontient plusieurs instructions, elles sont séparées par un point-virgule

Le point-virgule

Dans un programme JavaScript, il n’est pas nécessaire de terminer une ligne contenant une instruction par un point-virgule car si le point-virgule est absent, il sera implicite et le processeur JavaScript l’ajoutera Ainsi il faut éviter de couper une instruction en la faisant chevaucher deux lignes car sinon, le programme ajoutera un point-virgule à la fin de chaque ligne et l’instruction sera invalide En revanche, le point-virgule est obligatoire quand plusieurs instructions sont disposées sur une seule ligne Il est conseillé, néanmoins, d’ajou- ter un point-virgule à toutes les fins de ligne, excepté si elles sont terminées par une accolade.

La méthode alert() appartient à l’objet window Elle affiche une petitefenêtre ornée d’un bouton OK et, quand l’utilisateur clique dessus, elleferme la fenêtre

Récapitulation

Nous venons de voir qu’en JavaScript, il existe des objets, des méthodes,des événements, des opérateurs, des variables et des fonctions

La variable, récipient d’une valeur

Pour qu’une variable existe, il faut nécessairement qu’elle ait été déclarée,sinon votre page affichera une erreur JavaScript

La variable

La variable alloue une portion de la mémoire de votre teur à une donnée et le nom de la variable permet de désigner le contenu de cet emplacement mémoire Une variable typée permet de bien gérer la mémoire car un objet Date, par exemple, prend moins de place que son équivalent en chaîne de caractères.

ordina-La déclaration se fait soit d’une manière simple :

Elle peut être déclarée avec une valeur numérique, comme 10, et ensuiteêtre affectée d’une chaîne de caractères, comme "dix", sans qu’il y aitd’erreur.

Une variable peut contenir plusieurs valeurs Dans ce cas, on parle detableau

Le tableau, placard pour ranger plusieurs données

Un tableau est une collection de valeurs hétérogènes Elles ont identifiéespar un indice La première case a un indice 0, la deuxième un indice 1, etc

Le tableau est un moyen pratique de stocker plusieurs valeurs ou, àl’intérieur d’une fonction, de retourner un ensemble de valeurs

Le tableau peut être créé de différentes manières :

var touslesmois= new Array();

Ce tableau est vide, mais il est possible de lui affecter directement desvaleurs de la façon suivante :

b Figure 9.11 :

Tableau

var touslesmois= new Array("", "janvier",

"février", "mars", "avril", "mai", "juin",

"juillet", "aỏt", "septembre", "octobre",

"novembre", "décembre");

Le tableau contient désormais une case vide et les douze mois de l’année

en français Vous allez comprendre assez vite pourquoi la première caseest vide

Pour avoir la valeur du cinquième mois, il faut écrire :

document.write("Quel est le nom du cinquième mois ?"

document.write(" <LI>", touslesmois[i] )

m Figure 9.12 : Affıchage des mois