Création du contenu Rich Média - Tarek ZLITNI Offcial Web Site

Transcription

Création du contenu Rich Média
HTML5 : les formulaires 2.0
•
•
•
Avec Html 4, les types de champs n'étaient pas nombreux.
•
Plusieurs attributs simples à mettre en place améliorent la
prise en charge des formulaires, tout en se passant de
JavaScript.
HTML5 apporte plus d'une douzaine de nouveaux types.
HTML5 introduit de nombreuses nouveautés pour les
formulaires pour améliorer l'aide à la saisie et les contrôles
disponibles pour l'utilisateur.
©Tarek ZLITNI ([email protected])
Gestion Des Rich Média 59
• <input type=
•
•
•
•
•
•
•
•
•
search
tel
email
url
date
number
range
color
...etc
Champs
Syntaxe
Date
<input type="date" name="d" value=“<?php echo $today?>">
Date et temps
<input type="datetime" name="dt" value="<?php echo $now?>">
Time
<time>2013-06-27</time>
Nombre
<input type="number" name="nombre" value="12345">
Champs
Syntaxe
Month
<input type="month" name="holidays">
Week
<input type="week" name="int_week">
datetime-local
<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">
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>
Champs
Syntaxe
Range
<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>
Progress
<progress id="prog" max=100>
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, …
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.
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).
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 Javascript est 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>
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; //
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.
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
Les méthodes
•
•
•
Chaque méthode renvoie l'objet courant
Acces/modication au contenu d'un objet : html()
Exemple :
$ ( ' body ' ) . html ( " h e l l o wor ld " ) ;
•
•
Forcer l'utilisation de la fontion jquery() (à 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 l o World
<script> $('body').html("bonjour tout le monde" ) ; </script>
</body> </html>
Variables
•
•
•
var nomVaraible= ValInitiale;
var body = $ ( ' body ' ) ;
Variables standards :
Exemples :length ou size : Nombre d‘élements contenus dans l'objet
JQuery courant:
$ ( function ( ) {
var bodycont ent = $ ( " d i v " ) ;
$ ( '#id2 ' ). html ( " I l y a " + bodycont ent . l e n g t h + " ) " ) ;
// afficher le nombre des <div>
}) ;
text() vs. html()
•
html() : Remplacement du contenu d'un élément (les balises sont
considerees comme 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 ) " ) ;
}) ;
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)
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>
AJAX : Exemple (fichier test.php)
<?php
$donnee =$_POST['valeur'];
$maj =strtoupper($donnee);
echo $maj;
?>
Gestion du contenu Rich Média
Exploration des ressources
• Parcours d’un dossier et manipulation de ses fichiers :
1. Parcourir la liste des fichiers d’un dossier donné :appel de la
fonction ajax, en donnant l’url du répertoire.
2.
3.
•
Récupération des noms de tous les noms des fichiers
La suite du traitement demandé
Exemple :
•
Parcourir un dossier d’images de type « png » et les afficher
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>
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.
2.
Affichage dans le navigateur
Téléchargement d’un ficher XML
•
Exemple :
<!DOCTYPE html>
<html>
<head>
<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
}
•
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
}
•
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
}
•
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>
•
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
au chargement des métadonnées de la ressource vidéo.
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"))
•
•
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>
•
<!DOCTYPE html>
<html>
<head>
<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();
•
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>
•
•
Exemple :

Création du contenu Rich Média - Tarek ZLITNI Offcial Web Site

Transcription

Documents pareils

relations média et b2b – voyages de presse et avec bloggers

document - Tarek ZLITNI Offcial Web Site

Le Saoudien Tarek Binladen finance des projets

4ème Réunion Ministérielle de Suivi de la TICAD IV Demande d

Allez sur 2. Email 3. Clique r l`option Set + accounts ez sur add an

30ème Festival du film italien de Villerupt

LIRE EFFICACEMENT UN ARTICLE DE PRESSE REDIGER UNE

Tout Lyon Affiches

Marketing des Services - Université des Antilles

la radio, un média toujours d`avant-garde et efficace.

Tél : (819) 847-1705