HTML5 : les formulaires 2.0 Avec Html4, les typesde champs n'étaientpasnombreux. HTML5 apporteplus d'unedouzaine de nouveauxtypes. HTML5 introduit de nombreuses nouveautés pour les formulaires pour améliorer l'aide à la saisie et les contrôles disponibles pourl'utilisateur. Plusieurs attributs simples à mettre en place améliorent la prise en charge des formulaires, tout en se passant de JavaScript. Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 59
HTML5 : les formulaires 2.0 <input type= search tel email url date number range color...etc Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 60
HTML5 : les formulaires 2.0 Champs Syntaxe Date <input type="date" name="d" value= <?phpecho $today?>"> Date et temps <input type="datetime" name="dt" value="<?phpecho $now?>"> Time <time>2013-06-27</time> Nombre <input type="number" name="nombre" value="12345"> Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 61
HTML5 : les formulaires 2.0 Champs Syntaxe Month <input type="month" name="holidays"> Week datetime-local <input type="week" name="int_week"> <input type="datetime-local" name="bdaytime"> Note: type="datetime-local" n est pas supportépar Firefox et Internet Explorer. email <input type="email"name="email"> Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 62
HTML5 : les formulaires 2.0 Champs Syntaxe Couleur <input type="color" name="couleur" value=""> Champ de recherche <input type="search" name="" list="datalist" value=""> Data <data value="10">dix</data> Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 63
HTML5 : les formulaires 2.0 Champs Range Progress Syntaxe <input type="range" min="-100" max="100" value="0" step="2" name="power" list="powers"> <datalist id="powers"> <option value="0"> <option value="-30"> <option value="30"> <option value="+50"> </datalist> <progressid="prog" max=100> Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 64
AJAX AJAX : Asynchronous JavaScript and XML AJAX :une technologie de développent web technique pour la création des applications web interactives. N est pas un nouveau langage de programmation, mais une nouvelle façon d'utiliser les normes existantes. Communication client/serveur en mode asynchrone l'échange de données avec un serveur, et la mise à jour des parties d'une page Web - sans recharger la page entière. Utilise XHTML pour le contenu, CSS pour la présentation, avec Le DOM et JavaScript pour afficher du contenu interactif. Plusieurs APIs : JQUERY, PROTOTYPE, DOJO, YUI, ANGULAR JS, EXT JS, Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 65
AJAX AJAX est une technologie de navigateur Web (coté client) indépendant de la technologie coté serveur Web. XML est couramment utilisé en tant que format pour recevoir des données du serveur, bien que tout format, y compris le texte brut, peut être utilisé. Les applications Web classiques transmettent des informations vers et depuis le serveur utilisant des requêtes synchrones. Ł Cela signifie que vous remplissez un formulaire, cliquez sur Envoyer, et acheminés vers une nouvelle page avec de nouvelles informations à partir du serveur. Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 66
AJAX Ł Avec AJAX, quand vous cliquez sur envoyer, JavaScript communique avec le serveur, interprète les résultats, et met à jour l'écran actuel. Dans le sens le plus pur, l'utilisateur ne sais jamais que tout ce qui a même été transmis au serveur. (+) Un utilisateur peut continuer à utiliser l'application alors que le programme client demande des informations à partir du serveur en arrière-plan. (+) l'interaction de l'utilisateur est intuitive et naturelle. Clic est pas nécessaire, mouvement de la souris, par exemple, est un événement déclencheur suffisant. Piloté par les données (Data-driven) VS Piloté par les pages (page-driven). Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 67
AJAX : Contrôle de la vidéo Le contrôle d'un lecteur vidéo HTML5 lire, pause, augmentation et diminution du volume en utilisant du Javascriptest simple. Exemple: <video id="demo" src="bbcnews.mp4"></video> <div> <button onclick="document.getelementbyid('demo').play()">play </button> <button onclick="document.getelementbyid('demo').pause()">pause </button> <button onclick="document.getelementbyid('demo').volume+=0.1"> Volume +</button> <button onclick="document.getelementbyid('demo').volume-=0.1"> Volume -</button> </div> Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 68
AJAX : Exemple de contrôle de la vidéo Arrêter le chargement du média: l'arrêt de la lecture des médias est aussi facile :appeler la méthode pause (), le navigateur continue à télécharger le média jusqu'à ce que l'élément est écrasé par garbage collection. Exemples : var mediaelement = document.getelementbyid("mymediaelementid"); mediaelement.pause(); mediaelement.src=''; //ou mediaelement.removeattribute("src"); var mediaelement = document.getelementbyid('mediaelementid'); mediaelement.currenttime = 122; // Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 69
AJAX : L API JQUERY Principe de fonctionnement Définition d'une fonction : jquery() ou $() (raccourci) Accepte des paramètres (en général, un selecteur) Retourne un objet JQuery Est exécutée au cours du chargement de l'arbre DOM de la page Sinon, il faut utiliser window.onload Utilisation de sélecteurs CSS et JQuery pour accéder et manipuler les éléments de l'arbre. Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 70
AJAX : L API JQUERY Sélecteurs CSS Similaires aux éléments d'une feuille de style, ou XPath Exemples : #menuid, h2,.onglet, *, etc. Exemple : $ ( «body» ) http://docs.jquery.com/dom/traversing/selectors#css_selectors Sélecteurs Jquery Sélecteurs supplémentaires n'existant pas en CSS ou Xpath(ou raccourcis) Exemples : :visible, :first, etc Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 71
AJAX : L API JQUERY Les méthodes Chaque méthode renvoie l'objet courant Acces/modicationau contenu d'un objet : html() Exemple : $ ( ' body ' ). html ( " h e l l o wor ld " ) ; Forcer l'utilisation de la fontionjquery() (à la place de $() ) $. n oco n f l i c t ( ) ou j q u e r y. n oco n f l i c t ( ) <html> <head> <script type="text/javascript" src="jquery-1.11.3.js"></script> </head><body> He l lo World <script> $('body').html("bonjour tout le monde" ) ; </script> </body> </html> Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 72
AJAX : L API JQUERY Variables var nomvaraible= ValInitiale; varbody = $ ( ' body ' ) ; Variables standards : Exemples :length ou size : Nombre d élements contenus dans l'objet JQuery courant: $ ( function ( ) { var bodycont ent = $ ( " d iv " ) ; $ ( '#id2 ' ). html ( " I l y a " + bodycont ent. l e n g t h + " ) " ) ; // afficher le nombre des <div> }) ; Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 73
AJAX : L API JQUERY text() vs. html() html() : Remplacement du contenu d'un élément (les balises sont considereescomme des balises) text() : Remplacement du contenu d'un élément en considérant le tout comme du texte (les caractères < et > des balises sont remplaces par les entités XML (> et <) $ ( function () { var bodycontent = $ ( " d i v " ) ; $ ( '#id2' ). html ( " Il ya " + bodycont ent. length+ " div ) " ) ; }) ; Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 74
AJAX : L API JQUERY AJAX Methode : ajax(paramètres dans un tableau) Parametres : url: + adresse de la page a laquelle est envoyée la requête type: + type de la requête (GET ou POST) async: (true false) connexion asynchrone ou non data : + Tableau de clés/valeur (paramètres de la requête) success: + fonction (anonyme) exécutée en cas de succes complete: + fonction (anonyme) exécutée a la finn de l'envoi de la reponse par le serveur (en cas de succes ou d'erreur) Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 75
AJAX : L API JQUERY AJAX : Exemple (fichier HTML) <!DOCTYPE html> <html> <head> <script src="jquery-1.11.3.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var val=$('#champs').val(); $.ajax({url: "test.php", type: "POST", data:{valeur:val}, success: function(result){ $("#div1").html(result); }}); }); }); </script> </head> <body> <input type="text" value="val initiale" id="champs"> <div id="div1"></div> <button>afficher en MAJUSCULE</button> </body> </html> Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 76
AJAX : L API JQUERY AJAX : Exemple (fichier test.php) <?php $donnee =$_POST['valeur']; $maj =strtoupper($donnee); echo $maj;?> Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 77
Gestion du contenu Rich Média Exploration des ressources Parcours d un dossier et manipulation deses fichiers : 1. Parcourir la liste des fichiers d un dossier donné :appel de la fonction ajax,en donnantl url durépertoire. 2. Récupération des nomsde tousles noms des fichiers 3. La suite dutraitement demandé Exemple : Parcourirundossierd imagesde type «png»et lesafficher Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 78
Gestion du contenu Rich Média Exploration des ressources <script src="jquery-1.11.3.js"> </script> <script> var dir = "./"; var fileextension = ".png"; $.ajax({ url: dir, success: function (data) { //Lister tous les images et vérifier l extension $(data).find("a:contains(" + fileextension + ")").each(function () { var filename = this.href; $("body").append($("<img src="+ filename + "><br>")); }); } }); </script> Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 79
Gestion du contenu Rich Média Ecriture des annotations (XML) Ecriture dans un fichier XML : L écriture des fichiers XML qui repose sur l objet XMLDOM. 1. La création d une chaine englobant le contenu XML 2. La sérialisation de cette chaine 3. L Ecriture de contenu XML final 1. Affichage dans le navigateur 2. Téléchargement d un ficher XML Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 80
Gestion du contenu Rich Média Ecriture des annotations (XML) Exemple : <!DOCTYPE html> <html> <head> <script src="jquery-1.11.3.js"></script> <script > function parsexml(txt){ var xmldoc if (window.domparser){ xmldoc=(new DOMParser()).parseFromString(txt,"application/xml"); }else{ xmldoc=new ActiveXObject("Microsoft.XMLDOM"); xmldoc.async="false"; xmldoc.loadxml(txt); } return xmldoc } Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 81
Gestion du contenu Rich Média Ecriture des annotations (XML) Exemple : // Ecriture de contenu XML function getcountries() { return parsexml("<data><country name='usa'></country></data>") } //Sérialisation function tostringxml(xmlobject){ if(window.xmlserializer) return (new XMLSerializer()).serializeToString(xmlObject) else return xmlobject.xml } Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 82
Gestion du contenu Rich Média Ecriture des annotations (XML) Exemple : // Ecriture de contenu XML Final : affichage dans le navigateur function writerscreen(x){ window.open('data:text/xml,' + encodeuricomponent('<?xml version="1.0" encoding="utf-8"?>' +tostringxml(x) )) } // Ecriture de contenu XML Final : télécharger le fichier function writer(x){ var dataurl='data:application/download,' + encodeuricomponent( '<?xml version="1.0" encoding="utf-8"?> +tostringxml(x) ) location.href=dataurl } Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 83
Gestion du contenu Rich Média Ecriture des annotations (XML) Exemple : function generatexml(){ var data=getcountries() writer(data);//téléchargement //writerscreen(data);//affichage dans le navigateur } $(function(){ $('button').click(generatexml) }) </script> <title>writer</title> </head> <body> <button>générer un ficher XML</button> </body> </html> Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 84
Gestion du contenu Rich Média Ecriture des annotations (XML) Exercice: Ecrire script un javascript permettant de récupérer les principales propriétés d une vidéo et les écrire sous forme XML. Le code de génération du code XML est invoqué suite auchargement des métadonnées de la ressource vidéo. Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 85
Gestion du contenu Rich Média Chargement des annotations : (XML) Lecture d un fichier XML : Quatre étapes pour récupérer le contenu XML : 1. Charger le fichier XML (get) 2. Spécifier le nom du tag a sélectionner (une structure itérative ) 3. Accéder au contenu texte (text() ) 4. Accéder aux attributs ($nomvar.attr(«nomattribut")) Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 86
Gestion du contenu Rich Média Chargement des annotations : (XML) Lecture d un fichier XML: Exemple : Lire le contenu d un fichier XML décrivant un ensemble de livres et les affichant sous frome de liste Le document XML : <?xml version="1.0" encoding="utf-8"?> <livres> <livre type="scientifique" > <titre>programmer en Java</titre> <annee>2013</annee> <copyright>delannoy</copyright> </livre> <livre type="roman" > <titre>le zahir</titre> <annee>2010</annee> <copyright>choello</copyright> </livre> </livres> Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 87
Gestion du contenu Rich Média Chargement des annotations : (XML) Lecture d un fichier XML: <!DOCTYPE html> <html> <head> <script src="jquery-1.11.3.js"></script> <script > $(document).ready(function() { $.get('biblio.xml', function(d){ $('body').append('<h1> Ensemble de livres </h1>'); $('body').append('<div />'); $(d).find('livre').each(function(){ var $book = $(this); var type = $book.attr("type"); var titre = $book.find('titre').text(); var annee = $book.find('annee').text(); var cp = $book.find('copyright').text(); Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 88
Gestion du contenu Rich Média Chargement des annotations : (XML) Lecture d un fichier XML: var html = '<h4>' + titre + '</h4> '; html += '<ul><li>type :' + type + '</li>'; html += '<li>année de sortie : ' + annee + '</li>' ; html += '<li>(c): ' + cp + '</li>' ; html += '</ul><hr>'; $('div').append($(html)); }); }); }); </script> <body> </body> </html> Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 89
Gestion du contenu Rich Média Chargement des annotations : (XML) Lecture d un fichier XML: Exemple : Tarek ZLITNI (tarek.zlitni@gmail.com) GestionDes Rich Média 90