MySQL et CSS- P15

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:50

0
31
lượt xem
5
download

MySQL et CSS- P15

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

MySQL et CSS- P15: Dans la première partie, lancez-vous dans la création de votre premier site web dynamique en PHP. Au travers d’exemples simples et concrets, apprenez à votre rythme à développer un site web complet, relié à une base de données MySQL

Chủ đề:
Lưu

Nội dung Text: MySQL et CSS- P15

  1. 8 Vers l a CSS3
  2. 8 Vers la CSS3 Le futur des feuilles de style est la norme CSS3. La feuille de style a désormais des possibilités qui la rapprocheront de la PAO et donc du papier. Tous les bricolages et bidouillages nécessaires jusqu’à présent pour améliorer le rendu des CSS ne sont plus nécessaires car la CSS3 les incorpore. Plus besoin de se creuser la tête pour avoir un affichage homogène des boîtes sous forme de colonnes, plus besoin de créer des images spéciales pour arrondir les angles ! La CSS3 est vraiment la version qui mène la CSS à la maturité. Il reste maintenant aux navigateurs à se conformer à cette norme en intégrant les recommandations du W3C. Les différentes fonctionnalités implémentées rendent le développement des CSS plus intuitif, ce qui devrait plaire aux graphistes qui n’aiment pas passer 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" "bcd" } #head { position: a } #nav { position: b } #adv { position: c } #body { position: d } } 702 • Double Poche CSS
  3. Placer des boîtes m Figure 8.1 : Résultat @media all and (max-width: 500px) { body { display: "a" "b" "c" } #head { position: a } #nav { position: b } #adv { display: none } #body { position: c } } Double Poche CSS • 703
  4. 8 Vers la CSS3 m Figure 8.2 : Résultat Ici, avec la propriété display_model, il devient possible de créer un modèle qui donne la disposition des différentes boîtes. Chaque boîte est figurée par une lettre. Dans l’exemple précédent, les boîtes sont alignées verticalement. body { height: 100%; display: "a.b.c" (2em) "....." (1em) "d.e.f" "....." (1em) "g.h.i" (2em) 704 • Double Poche CSS
  5. Placer des boîtes 5em 1em * 1em 10em} #logo {position: a} #motto {position: b} #date {position: c} #nav {position: d} #main {position: e} #adv {position: f} #copy {position: g} #about {position: h}
  6. 8 Vers la CSS3 par un espace blanc de 1 em. Le rang et la colonne du milieu ne sont pas définis ou définis par un astérisque, ce qui les rend flexibles au niveau de leurs 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. body {background: silver; color: black} div.records {display: stack; border: outset} div.record {display: card} h2 {display: tab; width: 5em; border: outset; text-align: center} h2:current {border-bottom: solid silver} Men’s fashion Oversized jeans, 4 pockets. … Women’s fashion … Children’s fashion … Les boîtes ont la possibilité d’avoir des coins arrondis et une ombre, que l’on ne peut obtenir actuellement que par du bidouillage de code. div .nouvelles{ border: thin solid; box-shadow: 0.2em 0.2em #CCC; border-radius: 1em; } box−shadow donne les distances par rapport à la boîte, horizontale et verticale. 706 • Double Poche CSS
  7. Autres caractéristiques m Figure 8.4 : Boîte ombrée à bords arrondis 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 une couleur, en l’éclaircissant, en lui donnant plus de profondeur, etc. Double Poche CSS • 707
  8. 8 Vers la CSS3 La propriété transparency permet de définir une transparence de 0.0 (transparent) à 1.0 (opaque). Les systèmes de codage de couleurs comme RGB 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éfinies par diverses propriétés pour le type de voix, le débit du discours, le temps des 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 } b Figure 8.5 : Oreille Les empreintes de voix sont comme les polices de caractères, elles portent un nom : paul, female, male, etc. La voix paul a une accentuation modérée avec un jingle qui l’introduit, comme les annonces de gare. La voix de femme des paragraphes de classe heidi vient de la gauche et la 708 • Double Poche CSS
  9. Conclusion voix d’homme des paragraphes de classe peter vient de la droite tandis que les paragraphes de la classe goat ont une voix douce. Les polices Un certain nombre de caractéristiques étudiées pour la CSS3 concernent les polices et la manière de les afficher. font−size−adjust est une caracté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 de l’internaute, une autre police est utilisée ; la différence de taille pour le même corps est compensée : il s’agit de s’ajuster à la taille du caractère prévue. L’interprétation progressive (progressive rendering) est un processus qui consiste en un rendu temporaire des polices en attendant qu’elles soient chargées (à la façon des images). Une fois le chargement depuis le Web opéré, la vraie police remplace le rendu temporaire sans qu’il soit nécessaire de recharger la page. Les fonds La propriété background−break permet de faire courir une image de fond sur toute une boîte, éventuellement des boîtes intérieures, ou de répéter cette image à l’identique sur des boîtes intérieures. Il est possible de mettre 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 si elle est plus petite que la page en question, ou étendue jusqu’aux bordures avec 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 sont compatibles CSS3 et obtiennent un résultat satisfaisant au test Acid3 (http://acid3.acidtests.org/) : ¶ Firefox 3.2a1 (Gecko/20090119) : 93/100 Double Poche CSS • 709
  10. 8 Vers la CSS3 ¶ Opera 10.0 alpha 1 : 100/100 ¶ Safari 4 Developper Preview : 100/100 ¶ Konqueror snapshot r816030 : 73/100 ¶ WebKit (moteur JavaScript V8 de Google Chrome) : 100/100 ¶ Internet Explorer 8 RC1 : 21/100 Microsoft freine l’essor du CSS3 à dessein mais cette stratégie pourrait se retourner contre eux dans la mesure où les CSS3 vont se répandre sur le web. Si de gros sites adoptent la CSS3 en demandant à leurs visiteurs de télécharger Opera ou Firefox dont l’utilisation monte — on le voit dans les statistiques des sites —, alors Microsoft sera obligé d’adopter les recommandations de W3C. Les développeurs ont intérêt à insérer du CSS3 peu à peu sur leurs sites pour être prêts au moment venu. Il est toujours possible de créer deux feuilles de styles et d’orienter les visiteurs sur l’une ou l’autre selon la version de leur navigateur mais cela oblige à développer deux fois, merci Microsoft ! 710 • Double Poche CSS
  11. 9 L es CSS se m arient bien
  12. 9 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 langages compensent les manques des CSS ou les incompatibilités des différents navigateurs, ou encore renforcent et multiplient les possibilités des CSS. Internet marie bien les langages différents sur une même page, même si parfois 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 vous puissiez en assimiler quelques notions, puis différentes manières de compenser 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 à bien documenter son code, en particulier sur la page elle-même, avec des commentaires, des lignes de séparation, des lignes blanches. Le langage JavaScript est le plus souvent utilisé car c’est le plus souple puisqu’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 langage source. Ce processus évite de recharger la page pour opérer un change- ment. AJAX l’exploite au mieux en le mariant aussi au XML. 9.1 Le JavaScript Le JavaScript est un langage de script côté client principalement, c’est-à-dire que le code est exécuté par le client, le navigateur lui-même, en temps réel. Vous pouvez y accéder en affichant le source de la page au moyen de votre navigateur. Le JavaScript se place au milieu du code HTML entre les balises et . Un certain nombre de langages de script sont exécutés par le serveur, comme le PHP, l’ASP, etc. 712 • Double Poche CSS
  13. Le JavaScript m Figure 9.1 : PHP Côté client, côté serveur Imaginez que le serveur dans un café prépare vos consom- 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 la souris, un clic, une touche enfoncée…). Double Poche CSS • 713
  14. 9 Les CSS se marient bien m Figure 9.2 : Processus du langage client m Figure 9.3 : Processus du langage serveur 714 • Double Poche CSS
  15. Le JavaScript Le JavaScript peut se combiner avec de nombreux autres langages sur la même page avec cette spécificité qu’il est exécuté par le navigateur. Cette spécificité lui donne l’avantage de pouvoir réagir immédiatement à une action du visiteur sans qu’il soit nécessaire de recharger la page. L’inconvénient est que les fonctions JavaScript sont dépendantes du navigateur et de sa version. Le JavaScript a été inventé sur le navigateur Netscape. Puis Microsoft a voulu disposer de son propre JavaScript, en proposant le JScript pour Internet Explorer. Malgré les divergences, les deux navigateurs s’accordent sur un ensemble de fonctions communes. Ainsi il a été proposé par l’organisme de régulation ECMA plusieurs versions du JavaScript. m Figure 9.4 : Jscript Double Poche CSS • 715
  16. 9 Les CSS se marient bien JavaScript, le cerveau du navigateur m Figure 9.5 : Le cerveau du navigateur Imaginez le navigateur comme un corps humain. Le HTML composerait les cellules et le code JavaScript serait le cerveau, un lieu où convergent toutes les informations et qui réagit en temps réel. Imaginez que vous vous brûliez le doigt. Vous l’enlevez immédiatement de l’objet brûlant. Le langage JavaScript de la même façon réagit à des événements qui surviennent dans le document ou le navigateur. Il contrôle tous les composants du document, son apparence et son contenu, commande le navigateur, intervient dans les formulaires et dialogue avec le visiteur. Le JavaScript est orienté vers la communication humaine : ¶ Il a les yeux par-dessus l’épaule du visiteur et vérifie qu’il ne fait pas d’erreur dans un remplissage de formulaire (vérification de formulaires). ¶ Il met en valeur un texte en mouvement pour être sûr que le regard du visiteur soit accroché par un événement important (défilement de texte). 716 • Double Poche CSS
  17. Le JavaScript ¶ Il élabore un menu en arborescence qui s’escamote et se déplie selon le désir (menu dynamique). m Figure 9.6 : Un 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 une réponse immédiate. S’il clique, il ne tolère plus que l’écran soit sourd et aveugle. Dans ce monde virtuel, le JavaScript est devenu indispensable pour engager un dialogue avec les visiteurs. Même si votre site est modeste, 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 code pour souhaiter la bienvenue peuvent suffire. Quelques amuse-gueules Commençons par quelques amuse-gueules pour nous ouvrir l’appétit et comprendre les notions de base de manière amusante. Double Poche CSS • 717
  18. 9 Les CSS se marient bien Pour le JavaScript, le document est une armoire contenant une ou plusieurs portes, une ou plusieurs étagères, un ou plusieurs tiroirs, une penderie ou pas, etc. Ainsi l’objet document contient une ou plusieurs fenê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 et . imprimez la page Si le navigateur a une version égale ou supérieur à Netscape 4 et Internet Explorer 5, le gestionnaire d’impression sera appelé pour imprimer la page. m Figure 9.7 : Imprimer 718 • Double Poche CSS
  19. Le JavaScript Le caractère dièse (#) dans le lien fait référence à la page elle-même et permet d’activer la méthode print() de l’objet window. Le terme onClick dé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 () afin de désigner une ancre . 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 lien servira à retourner sur la page précédente. Ce bouton imite la commande du navigateur qui permet de revenir en arrière. revenir à la page précédente 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. revenir à la page précédente 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éer ces messages, appelés pourriels en français ou spam en anglais, il faut utiliser des robots qui récoltent les adresses sur les sites. Double Poche CSS • 719
  20. 9 Les CSS se marient bien Pour tromper ces robots, vous allez modifier l’apparence du code HTML à l’aide du JavaScript. Vous pourrez insérer ce code n’importe où dans votre page, entre les balises HTML et . m Figure 9.8 : Crypter les adresses email Ce script est inséré entre deux balises . Ainsi le navigateur identifiera le code JavaScript à exécuter parmi les balises HTML. m Figure 9.9 : Robots & Co 720 • Double Poche CSS
Đồng bộ tài khoản