Transcription
pour créer votre premier site webDès le début du livre l’auteur présente un tour d’horizon du développement sur le Web ; les langages côté client et serveur, les formatsd’images, les navigateurs afin que le lecteur comprenne les mécanismes par lesquels le contenu d’une page s’affiche sur un écran. Lechapitre suivant enseigne les règles générales à observer pour développer de manière efficace : lisibilité du code, organisation des dossiers, utilisation des éditeurs de code, référencement Ensuite, l’auteur entre dans le vif du sujet et présente tout d’abord lelangage HTML5 qui permet de structurer une page, de disposer leséléments visuels très précisément. Le second langage présenté est leCSS3, qui permet quant à lui d’ajouter des styles, des effets visuelsrendant inutile l’utilisation d’images et permettant d’adapter l’affichageaussi bien sur un téléphone que sur un ordinateur. Pour avoir unebonne connaissance des langages utilisés côté client, le troisième présenté dans ce livre est le JavaScript. C’est ce langage qui va permettred’ajouter de l’interactivité sur les pages, de faire des comparaisons,de répéter des actions, d’utiliser une base de données côté client Au travers d’exemples concrets et au-delà de l’aspect purement technique de cet apprentissage, l’auteur transmet au lecteur les principalesrègles de mise en page à respecter pour rendre le site agréable àl’œil, convivial et facile d’utilisation ainsi que les bonnes méthodes deTéléchargementdéveloppementet les pièges à éviter. Après la lecture de ce livre, lewww.editions-eni.fr.frlecteur pourra créer un site web fonctionnel dont il pourra être fier.Les chapitres du livreAvant-propos Le Web Règlesgénérales HTML CSS3 JavaScript Mise en page HTML etCSS Les méthodes de dessin Lemultimédia Les formulaires Lesliens et menus en HTML5Pour plusd’informations :29,90 sur www.editions-eni.fr :b Le code des exemples traitésdans le livre.Denis MATARAZZO développe depuis plus de trente ans dans denombreux langages de programmation. Également passionné d’art graphique, cette double compétence dedéveloppeur et d’infographiste, lui apermis d’accompagner de nombreuxprojets où la communication entreces deux mondes n’était pas facile.Pédagogue, il travaille aujourd’huiessentiellement comme formateurpour des développeurs ou des infographistes et accompagne des projets de développement informatiqueliés au web. Dans ce livre, il rassemble tout son savoir-faire et touteson expérience pour permettre aulecteur de réaliser en toute autonomie le site qu’il a en tête.ISBN : 978-2-7460-9105-4Ce livre s’adresse à de grands débutants en développement informatique, qui n’ont jamais programmé avec HTML5, CSS3 et JavaScript.L’auteur guide le lecteur en lui enseignant des méthodes efficaces etactuelles pour créer son premier site web, en partant vraiment dezéro et en allant jusqu’à un niveau suffisant pour qu’il soit ensuiteautonome.HTML5, CSS3 et JavaScript - pour créer votre premier site webApprenez les langages HTML5, CSS3 et JavaScriptApprenez les langagesHTML5 , CSS3et JavaScriptpour créer votrepremier site webDenis MATARAZZO
Table des matièresLes éléments à télécharger sont disponibles à l'adresse suivante :http://www.editions-eni.frSaisissez la référence ENI du livre RIHTCSJA dans la zone de rechercheet validez. Cliquez sur le titre du livre puis sur le bouton de téléchargement.Avant-proposChapitre 1Le Web1. Qu’est-ce que le Web ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71.1 Côté serveur : HTTP, FTP, langages, SQL . . . . . . . . . . . . . . . . . . 71.2 Côté client : HTML, CSS, JavaScript . . . . . . . . . . . . . . . . . . . . . 102. Les langages et leur utilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.1 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.2 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132.3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162.4 Exemple général avec les trois langages. . . . . . . . . . . . . . . . . . . . 203. Les formats d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263.1 Format Bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263.2 Format vectoriel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314. Les navigateurs et leurs outils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Chapitre 2Règles générales1. Préserver la lisibilité : l’indentation, les commentaires . . . . . . . . . . . 471.1 L’indentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471.2 Les commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502. Penser au référencement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513. Dossiers et chemins vers les fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . 531
HTML5, JavaScript et CSS32Pour créer votre premier site web4. Les éditeurs pour le code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575. Des raccourcis bien pratiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 635.1 Sauvegarder et tester une page . . . . . . . . . . . . . . . . . . . . . . . . . . 635.2 Sélectionner du texte ou se déplacer plus vite sans la souris . . . 65Chapitre 3HTML1. Création d’une page web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 672. Code HTML obligatoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 683. Le doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694. La balise head . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694.1 Lien avec une feuille de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . 714.2 Lien avec un fichier JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . 725. La balise body . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 735.1 Méthode et balises pour structurer une page . . . . . . . . . . . . . . . 755.2 Le texte dans la page HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . 835.3 Les caractères spéciaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85Chapitre 4CSS31. Les trois styles de base possibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 871.1 Le style de balise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 871.2 Le style de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 911.3 Le style d’ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 921.4 Combinaison des trois méthodes . . . . . . . . . . . . . . . . . . . . . . . . 942. Les polices de caractères et le Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . 973. Les sélecteurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Table des matières4. Les pseudoclasses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1174.1 Pour les liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1174.2 Pour le texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1194.3 Pour les sélecteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1205. Les couleurs en hexadécimal, en RGBA ou en HSLA . . . . . . . . . . . . 1206. Les images et les bordures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1257. Les boutons issus d’images ou de polices . . . . . . . . . . . . . . . . . . . . . 1268. Les fonds et fonds multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1319. Le positionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13210. Le débordement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13411. Utilisation de padding et margin. . . . . . . . . . . . . . . . . . . . . . . . . . . . 13512. Un préfixe par navigateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13613. Des propriétés décoratives (ombre, dégradé, arrondi.) . . . . . . . . . . 13714. Des colonnes dans le texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13915. Les transformations 3D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14116. Les transitions et animations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14517. Le responsive design et les media queries . . . . . . . . . . . . . . . . . . . . . 147Chapitre 5JavaScript1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1512. La liste des tâches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1513. Variables et affectation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1544. Les types de variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1554.1 Les valeurs numériques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1554.2 Le texte et la concaténation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1554.3 Les tableaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1574.4 Les booléens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1583
4HTML5, JavaScript et CSS3Pour créer votre premier site web4.5 Les objets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1595. Les opérateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1616. Les conditions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1656.1 if, else et les accolades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1656.2 switch case . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1717. Itérations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1747.1 La boucle for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1747.2 Le while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1787.3 Le do . while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1797.4 break et continue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1808. Déboguer un programme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1819. Les fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1849.1 Déclaration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1859.2 Appel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1869.3 Les variables locales et globales . . . . . . . . . . . . . . . . . . . . . . . . . 1869.4 Le retour d’une fonction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18810. Les cookies. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18911. Le drag and drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19212. Afficher le site HTML en plein écran . . . . . . . . . . . . . . . . . . . . . . . . 19513. Gestion de l’historique du navigateur . . . . . . . . . . . . . . . . . . . . . . . . 19714. La géolocalisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19915. Les bases de données locales. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20215.1 Création d'une base de données. . . . . . . . . . . . . . . . . . . . . . . . . 20315.2 Création d’une table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20315.3 Insertion d'enregistrements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20415.4 Lecture d'informations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20416. Générer des PNG en JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20517. Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Table des matièresChapitre 6Mise en page HTML et CSS1. Les blocs et leur position à l’écran . . . . . . . . . . . . . . . . . . . . . . . . . . . 2151.1 Les tableaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2151.2 Les div et les nouvelles balises HTML5 . . . . . . . . . . . . . . . . . . . 2182. Les listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223Chapitre 7Les méthodes de dessin1. La balise Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2272. La balise SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2323. Avantages et inconvénients des deux technologies . . . . . . . . . . . . . 241Chapitre 8Le multimédia1. La balise vidéo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2432. Les codecs vidéo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2473. La balise audio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2484. Les codecs audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250Chapitre 9Les formulaires1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2532. Fonctionnement d’un formulaire client/serveur . . . . . . . . . . . . . . . 2543. Les différentes balises du formulaire . . . . . . . . . . . . . . . . . . . . . . . . . 2554. Les expressions régulières . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2645. La validation du formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2665
HTML5, JavaScript et CSS36Pour créer votre premier site web6. Ajout d’un script CGI sur le serveur . . . . . . . . . . . . . . . . . . . . . . . . . 268Chapitre 10Les liens et menus en HTML51. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2712. Création de liens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2722.1 Ouverture de page HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2722.2 Ouverture d’une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2732.3 Navigation dans la page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2742.4 Proposer le téléchargement d’un fichier . . . . . . . . . . . . . . . . . . 2752.5 Envoyer un mail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2752.6 Déclenchement d’un script JavaScript . . . . . . . . . . . . . . . . . . . 2773. Création d’un menu (liste liens CSS) . . . . . . . . . . . . . . . . . . . . 2774. Ajout de « data » dans les liens. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
227Chapitre 7Les méthodes de dessin1. La balise CanvasLes méthodes de dessinLe fichier 7 1 spirale.html affiche une spirale animée. Le dessin de la spiraleavait déjà été détaillé dans le chapitre Le Web, rajoutons à présent l’interaction avec JavaScript permettant de modifier la vitesse de rotation de la spirale,par exemple.
HTML5, JavaScript et CSS3Pour créer votre premier site webLa copie d’écran montre à gauche une information sur le nombre d’images parseconde (ou frames per second, fps) et à droite quatre boutons. Le premier arrêtel’animation, le suivant ralentit l’animation, le troisième l'accélère et le dernierpermet de passer en plein écran.Le code HTML ne contient rien de nouveau. body onload "dessine()" div id "fullscreen" canvas id "spire id" width "600" height "600" /canvas span class "fs-button" /span span class "plus btn" /span span class "moins btn" /span span class "stop btn" /span /div /body Nous avons donc un div, pour le plein écran, la balise canvas pour le dessinde la spirale, et ensuite quatre span permettant d’afficher les boutons.Les styles de classe des span utilisent la police ModernPictogramsNormalpour afficher les pictogrammes.Il y a un événement onload dans la balise body pour mettre en route l’animation en appelant la fonction dessine().Une nouvelle instruction est utilisée dans la fonction dessine, c’est setInterval.intervId setInterval(reDessine, 1);Cette ligne de code permet d'appeler la fonction reDessine toutes les millisecondes, donc 1000 fois par seconde. La variable intervId, qui est une variable globale, permettra de mettre fin à ce setInterval. Car une fois lancé,le setInterval exécutera toutes les millisecondes la fonction reDessine,et si rien n’est prévu pour l’arrêter, il faudra quitter le navigateur pour toutstopper. Editions ENI - All rights reserved228
Les méthodes de dessinChapitre 7Avant de regarder ce que fait la fonction reDessine, voyons le code qui permet de gérer le clavier. Il est écrit en utilisant jQuery et vous aurez sûrementd’autres occasions d’écrire ce genre de code qui enrichit jQuery. (function() { (document).keydown(function(evt) {if (evt.keyCode 32) {if (tourne bool) {tourne bool false;clearInterval(intervId);} else {tourne bool true;intervId setInterval(reDessine, 1);}}if (evt.keyCode 27) {tourne bool false;clearInterval(intervId);}});});La première ligne accède à jQuery et permet d’ajouter une nouvelle fonctionnalité. La seconde ligne, avec le keydown, va intercepter les touches du clavierqui sont appuyées. Lorsque l’événement a lieu, le code de la touche pressée eststocké dans la propriété de l’événement, keyCode.Pour ceux qui connaissent l’ASCII (American Standard Code for InformationInterchange qui est le code américain normalisé pour l'échange d'information,c'est-à-dire une norme de codage des caractères ; pour plus de détails, voir :http://www.asciitable.com), le premier test est fait sur la barre d’espace, quia pour keyCode 32.À différents endroits du code, il y a un booléen tourne bool qui est lu et/ou mis à jour, indiquant si la spirale tourne à ce moment-là ou non.Si la barre d'espace est pressée et que tourne bool est à true, alors le booléen passe à false, et la fonction clearInterval(intervId); est appelée.C’est ce clearInterval(intervId); qui va mettre un terme ausetInterval défini précédemment.229
HTML5, JavaScript et CSS3230Pour créer votre premier site webSi la touche enfoncée a pour keyCode 27, c’est la touche [Echap] (esc ouescape) du clavier qui stoppera l’animation.La partie suivante du code, avec : (document).ready(function() {.}permet d’initialiser le click sur les différents boutons : le passage ou la sortiedu plein écran pour le premier, puis moinsVite();, plusVite(); etstopSpir(); pour les trois autres boutons.RemarqueÀ noter que le code pour le plein écran n’est écrit que pour Chrome et Safari,soit les navigateurs utilisant webkit.L’appel par la fonction setInterval étant déjà le plus rapide possiblepuisque paramétré sur une milliseconde, la solution pour modifier la vitessesera d’augmenter ou de diminuer le pas entre chaque morceau de dessin de laspirale.Nous avons donc la fonction reDessine() qui est appelée 1000 fois parseconde. Elle va simplement définir le sens du dessin de la spirale et surtoutappeler ensuite la fonction dessineSpirale() qui s’occupe réellement dedessiner la spirale.dessineSpirale()commence avec la ligne de code :Cette ligne va simplement permettre d’effacer le canvas. C’est le cas avecbeaucoup de systèmes de dessin, où un dessin est créé dans un premier temps.Ensuite, pour l’animer, l’ensemble est effacé pour être à nouveau dessiné unpeu plus loin, et ainsi créer l’animation. Le fait d’écrire que la largeur est égaleà la largeur va en fait très rapidement réinitialiser le canvas, et donc l’effacer. Editions ENI - All rights reservedcanvas.width canvas.width;
Les méthodes de dessinChapitre 7Le code permettant de dessiner la spirale a été vu en dans le premier chapitre.Ici, il faut remarquer que la ligne suivante :var theta angleDepart;est écrite une première fois pour la première spirale, puis, une fois dessinée, lestylo est remis au centre et un nouvel angle de départ est défini à l’opposé dupremier, puisque la moitié d’un cercle (PI/2) est ajouté.ctx.moveTo(0, 0);// on repart à 90 theta angleDepart Math.PI / 2;canvas permet d’afficher assez simplement une ombre. C’est ce que font leslignes qui finissent le dessin. Les propriétés shadowOffsetX et shadowOffsetY définissent le décalage de l’ombre, shadowBlur la taille du flou etle dernier paramètre définit la couleur.// ombrectx.shadowOffsetX 4;ctx.shadowOffsetY 4;ctx.shadowBlur 5;ctx.shadowColor 'rgba(0,0,0,0.6)';Une fois le tout dessiné, c’est la partie texte pour la vitesse d’affichage qui estmise en place.Deux variables sont utilisées ici : thisloop et lastloop. lastloop estinitialisée avec la date complète au début du programme. Sa précision est del’ordre de la milliseconde. Lorsque le dessin de la spirale sera terminé, onstockera dans thisloop la date en cours, qui sera donc plus grande quelastloop, la différence entre les deux équivalant à la durée du dessin Aufinal, la variable thisFrameTime contiendra la différence entre thisloopet lastloop, si bien que nous connaîtrons le temps mis pour dessiner unespirale.var text (1000 / frameTime).toFixed(1) " fps";ctx.font "12pt Verdana";ctx.textAlign "left";ctx.textBaseline 'top';ctx.fillStyle 'rgb(0,0,0)';231
HTML5, JavaScript et CSS3232Pour créer votre premier site webL’affichage de la vitesse étant en images par seconde, il faut partir de la valeur1000, puisque le temps récupéré est en millisecondes, et la diviser par frameTime pour avoir une valeur en relation avec les secondes.L’instruction .toFixed(1) permet d’arrondir à un chiffre après la virgule lerésultat de la division.Ensuite, les propriétés du canvas liées au texte sont utilisées pour définir lapolice utilisée et sa taille, l’alignement et la couleur.2. La balise SVGLe format de dessin SVG permet de dessiner au travers de balises. Il peut êtrecréé dans un éditeur de code ou exporté à partir d’un logiciel de dessin vectoriel.Il est également possible d’utiliser des CSS pour l’aspect et des scripts pourl’interactivité. Dans l’exemple qui suit, le script est en fait de l’ECMAScript.RemarquePour la petite histoire, ECMAScript est à l’origine du JavaScript. La technologieFlash utilise ActionScript qui découle également d’ECMAScript, ce qui rend lessyntaxes très proches.Exemple d’infobulle ?xml version "1.0" encoding "UTF-8"? !DOCTYPE svg [ !ENTITY dureeAnim "2s" ] L’en-tête du fichier SVG est du XML. Ensuite, l’entité (ENTITY) est l’équivalent d’une variable. Ici, dureeAnim mémorise le texte « 2s » qui sera la duréede l’animation faite en SVG. Editions ENI - All rights reservedOn pourrait écrire un livre complet sur le format SVG. L’exemple suivant vapermettre d’avoir une idée sur ce qu’il est possible de faire. Le fichier7 2 infoBulle.svg montre une animation et un peu d’interactivité.
29,90 ISBN : 978-2-7460-9105-4 Ce livre s'adresse à de grands débutants en développement informa-tique, qui n'ont jamais programmé avec HTML5, CSS3 et JavaScript. L'auteur guide le lecteur en lui enseignant des méthodes efficaces et actuelles pour créer son premier site web, en partant vraiment de zéro et en allant jusqu'à un niveau suffisant pour qu'il soit ensuite
