Inscris-toi au e-camp "Héberge ton jeu Facebook sur Azure" de Microsoft vendredi 25 mai à 13h30 !

> Le Site du Zéro - Informatique

> Les forums

> Site Web

> Javascript

> Fonctionnalités de Javascript apparentées HTML5

> Lecture du sujet

Fonctionnalités de Javascript apparentées HTML5

Explications et comparatifs

Pour accéder à cette section
Connectez-vous !

Page 1

Auteur

Message

1 visiteur sur ce sujet (1 Anonyme)

Page 1

m@tteo78

# Posté le 22/05/2011 à 00:56:34

Let me think about this..
Avatar

Présentation des fonctionnalités Javascript apparentées à HTML5

Ce court article traite des fonctionnalités récemment apparues du côté Javascript et que l'on peut associer à HTML5. Bonne lecture !

Table des matières

Détection de la prise en compte des fonctionnalités de HTML5
Proposez une alternative pour les navigateurs qui ne supportent pas les nouvelles fonctionnalités
Query Selectors
Web Storage
Balises de média
Bases de données en Javascript avec le WebSQL
Web Workers
FileSystem API
Compatibilité des fonctionnalités pour I.E, Opéra, Firefox, Safari et Google Chrome
Réagissez !

I. Détection de la prise en compte des fonctionnalités de HTML5

Citation : restimel

Comme le précise le site DiveintoHtml5, le HTML5 n'est pas UNE grande boîte à outils mais un regroupement de PLUSIEURS fonctionnalités (la preuve est que certaines fonctionnalités (comme canvas ou querySelector...) existaient bien avant qu'on parle de HTML5) ; et les spécifications restent ouvertes (c'est à dire que de nouvelles fonctionnalités peuvent toujours être ajoutées au fur et à mesure). Il est alors impossible de dire qu'un navigateur supporte 100% du HTML5.

Nous pouvons cependant vérifier si les technologies supportées par notre script sont disponibles sur le navigateur et proposer des solutions alternatives au cas échéant. Les vérifications peuvent se faire manuellement mais il est intéressant d'utiliser une librairie externe de vérifications comme Modernizr. Cette dernière effectue des vérifications au démarrage du script (que l'on charge en premier) et stocke des booléens correspondants à l'implémentation de la propriété correspondante dans l'objet Modernizr.

Pour télécharger la librairie Modernizr, rendez-vous sur le site officiel de cette librairie et regardez vers le bas de page pour trouver le bouton « Télécharger » (taille de la librairie : ~8,8 Ko). Voici les propriétés correspondantes aux technologies présentées dans cette article :

Code : JavaScript

Modernizr.localstorage; // Web Storage
Modernizr.webworkers; // Web Workers
Modernizr.canvas; // Canvas

/* Vidéo */
Modernizr.video; // Support des balises et du nécessaire
Modernizr.video.webm; // Support du format WebM
Modernizr.video.ogg; // Support du format OGG
Modernizr.video.h264; // Support du format MP4

/* Audio */
Modernizr.audio; // Support des balises et du nécessaire
Modernizr.audio.ogg; // Support du format OGG
Modernizr.audio.mp3; // Support du format MP3
Modernizr.audio.wav; // Support du format WAV
Modernizr.audio.m4a; // Support du format M4A

Modernizr.websqldatabase // WSD

Tester un script de détection de compatibilité

Notez que Modernizr ne détecte pas tout seul le support des Query Selectors ; cependant, vous pouvez le détecter grâce au simple code suivant :

Code : JavaScript

if(document.querySelector && document.querySelectorAll) {
    // Query Selectors supporté
} else {
    // Utiliser une solution alternative (getElementById, tagName, ...)
}

Vous pouvez aussi consulter la liste des autres variables de support sur la documentation du site de Modernizr.

II. Proposez une alternative pour les navigateurs qui ne supportent pas les nouvelles fonctionnalités

Il peut être frustrant pour l'utilisateur et le visiteur de votre site de devoir mettre à jour son navigateur pour l'utiliser. Le projet Google Gears a été créé avant que les fonctionnalités HTML5 n'arrivent, il était fait pour ajouter de nouvelles « choses » au navigateur sur lequel il était installé. Aujourd'hui, il n'est plus maintenu et a été délaissé au profit de HTML5 ; cependant, il peut être intéressant de proposer au visiteur de le télécharger pour accéder à votre site.

1) Proposer Gears au téléchargement

Il suffit de créer un lien dans votre page qui ne s'affichera que lorsque les fonctionnalités désirées seront absentes (détectez-le grâce à Modernizr, voir ci-dessus). Pour donner un lien de téléchargement sur votre site, l'URL doit pointer sur http://gears.google.com/ et peut avoir comme paramètre ceci :

action : si vous voulez aller sur la page de téléchargement, entrez « install » (sans guillemets) ;
name : le nom de votre site (150 caractères maxi)
message : le message que vous souhaitez afficher pour les visiteurs
icon_src : l'icône à afficher, si non spécifié, l'icône de Gears sera affichée
return : le site vers lequel rediriger, quand le téléchargement sera fini

Exemple de lien : http://gears.google.com/?action=instal [...] iteduzero.com

2) Détecter si Gears est installé

Pour vérifier l'installation de Gears, incluez le script « gears_init.js » et testez la présence de la variable google.gears, si elle est définie, Gears est installé et actif.

Exemple :

Code : JavaScript

if(Modernizr.localstorage) {
    // On utilise le Web Storage HTML5
} else if(google.gears) {
    // On utilise le Web Storage Gears
} else {
    window.location.href = /* Vers la page de téléchargement de Gears */;
}

Ce bout de code vérifie, grâce à Modernizr, si le Web Storage HTML5 est disponible. Sinon, si Gears est installé, on utilise le Web Storage de Gears. Sinon on redirige vers la page de téléchargement. C'est un code qui peut être amélioré.

3) Autres infos sur Gears

Vous pouvez consulter la liste des navigateurs et pour quelles versions ils sont disponibles pour Gears en bas d'article, dans le tableau comparatif. Gears implémente les fonctionnalités suivantes :

Applications hors-ligne avec les fichiers Manifest (à venir dans cet article)
Géo-localisation (à venir dans cet article)
Web Storage
Web Workers (appelés WorkersPool)
API Canvas
WebSQL Database (utilise SQLite)
Et autres...

Liens :

III. Query Selectors

Les fonctions types d'accès à l'arbre DOM en Javascript sont :

getElementById
getElementsByTagName

Les frameworks Javascripts proposent des sélecteurs d'accès à l'arbre DOM reprenant la structure des sélecteurs CSS, jQuery par exemple utilise principalement ce système. Un exemple :

Code : Console

body header #banniere

Le Query Selector est une standardisation de ce système. Il propose notamment des sélecteurs CSS3 et surtout est le plus rapide comparé aux sélecteurs des frameworks. On peut vérifier cela en visitant SlickSpeed (En) qui propose des tests comparant différents sélecteurs dont le standard (native).
Constatez par vous-même.

Pour utiliser le Query Selector, deux fonctions de Javascript sont mises à notre disposition. querySelector sélectionne le premier nœud de l'arbre DOM trouvé selon la syntaxe de CSS passée en paramètre tandis que querySelectorAll sélectionne tous les nœuds trouvés et les retourne dans un tableau.

Exemple :

Code : HTML - Exemple

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test des Query Selectors</title>
    </head>
    <body>
        <header>
            <h1>Grand titre de haut de page</h1>
        </header>
        <p>Blablablablabla... Blablablablabla.</p>
        <p>Blablablablabla... Blablablablabla.</p>
        <p id="long_p">Blablablablabla.......... Blablablablabla.</p>
        <script>
            document.querySelector("body header h1"); // Sélectionne le H1 « Grand titre de haut de page »
            document.querySelectorAll("body p"); // Sélectionne tous les paragraphes de la page
            document.querySelector("#long_p"); // Sélectionne le paragraphe qui a pour id « long_p »
        </script>
    </body>
</html>

Tester

Les Query Selectors renvoient par contre des résultats qui ne sont jamais mis à jour qu'en redémarrant la recherche.

Avantages :

Très rapide
Disponible sur beaucoup de navigateurs
Pratique à utiliser

Inconvénients :

Le résultat de la recherche n'est pas modifié dynamiquement (ne se met pas à jour en cas de modification du nœud)

IV. Web Storage

Une des nouvelles fonctionnalités notables de JS est le Web Storage. Il propose une façon propre et sécurisée de stocker des paires clé/valeurs dans le navigateur pour être ensuite ré-utilisées n'importe quand (même après une fermeture du navigateur !). En combinaison avec les événements de connexion récemment introduits aussi, la création d'applications en-ligne qui peuvent passer en mode hors-ligne sans perdre de données est désormais plus facile. En plus, d'être implémenté sur la plupart des navigateurs dans leurs versions récentes, le Web Storage est aussi plus avantageux que les Cookies (qui sont vraiment difficile d'accès en Javascript) car il est accessible par des fonctions spécialisées et plus avantageux que Flash car il est nativement implémenté dans le navigateur.Le Web Storage est divisé en deux parties : le sessionStorage et le localStorage. Chacune de ces parties ont des fonctions communes :

getItem(clef) - Récupère la valeur de la paire portant la clef "clef"
setItem(clef, valeur) - Modifie la valeur de la paire portant la clef "clef" ou définit la paire "clef, valeur"
removeItem(clef) - Supprime la paire portant la clef "clef"
clear() - Vide le localStorage / sessionStorage
key(i) - Récupère la clef de la paire n°i
length - Nombre de paires

sessionStorage

Le sessionStorage est une déclinaison du Web Storage sauvegardant des données des façon sécurisée uniquement pour la session actuelle du navigateur. Comme le localStorage, il est implémenté par l'objet Window.

Le sessionStorage est censé se restaurer quand le navigateur se ferme anormalement mais, sur Firefox, ça ne marche pas actuellement.

localStorage

Le localStorage est une déclinaison du Web Storage qui, lui, sauvegarde les données même après fermeture du navigateur. On peut grâce à cela imaginer par exemple un système qui sauvegarde le texte d'un champ texte au cas où le navigateur se fermerait, ou tout autre problème. Voici comment on pourrait coder cela :

Code : HTML

<!doctype html>
<html>
	<head>
		<title>Sauvegarde automatique du texte</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<textarea rows="15" cols="40" id="textarea"></textarea>
		<br />
		<div id="notif">-</div>
		
		<script>
			if(localStorage["text_save.text"]) {
				document.querySelector("#textarea").value = localStorage["text_save.text"];
				
				document.querySelector("#notif").innerHTML = "Texte chargé";
				
				setTimeout(function() {
					document.querySelector("#notif").innerHTML = "-";
				}, 1500);
			}
		
		   	setInterval(function() {
		   		localStorage["text_save.text"] = document.querySelector("#textarea").value;
		   		localStorage["text_save.date"] = new Date();
		   	
		   		document.querySelector("#notif").innerHTML = "Texte sauvegardé";
		   		
		   		setTimeout(function() {
		   			document.querySelector("#notif").innerHTML = "-";
		   		}, 1500);
		   	}, 5000);
		</script>
	</body>
</html>

Tester

Avantages :

Sécurisé, propre
Structuré
Implémenté sur la plupart des navigateurs récents

Inconvénients :

Mal utilisé, il peut ouvrir des failles

V. Balises de média

Des nouveautés qui ont fait beaucoup parler d'elles ces derniers temps sont <canvas>, <audio> et <video>. En effet, ces trois balises comblent le désavantage qui était auparavant masqué par Flash qui est de ne pas pouvoir animer ou jouer des sons/médias nativement. Ces balises sont gérées par Javascript au travers d'une API qui leur a été spécifiée.

<canvas>

Dans cette balise peuvent être représentés toutes sortes de choses, il s'agit d'une sorte d'image dynamique, qui est crée par Javascript. Associée aux Timers, cette nouvelle technologie peut permettre de créer de complexes animations voir des jeux complets. Je ne vais pas détailler l'API de dessin ici, ce serait trop long à aborder mais cependant je peux vous renvoyer sur deux liens :

Exemple :

Code : HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test de canvas</title>
    </head>
    <body>
        <canvas width="400" height="400"> <!-- Nous ne pouvons pas passer par CSS pour définir la taille du canevas car cela le redimensionnerait (comme une image simple) -->
            Votre navigateur ne peut pas afficher le contenu de cette balise, pour remédier à cela, merci d'installer une version plus récente de votre navigateur.
        </canvas>
        <script>
            var canvas = document.querySelector("body canvas"), ctx = canvas.getContext("2d");

            ctx.strokeStyle = "blue";

            ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.quadraticCurveTo(400, 0, 400, 400);
            ctx.stroke();
        </script>
    </body>
</html>

Tester

<audio> & <video>

Les balises <audio> et <video> permettent de lire nativement des médias. Ce qui signifie qu'aucun plug-in n'est nécessaire : le navigateur les lit lui-même. Ces balises peuvent prendre comme paramètre :

controls - Affiche le lecteur
preload - Précharge le fichier (audio / vidéo)
src="/chemin/du/fichier/media" - Indique le chemin pour accéder au fichier à lire
Et d'autres...

Vous pouvez gérer les éléments audio et vidéos grâce à Javascript. Vous pouvez même créer un nouvel objet Audio dans le script au lieu de mettre un balise du même nom dans votre code HTML. Cela reviens au même mais permet de mieux vous structurer : si vous codez en Javascript, mieux vaut créer un objet Audio afin de ne pas avoir à le récupérer dans l'arbre DOM. Au contraire, si vous ne codez qu'en HTML, il est préférable de créer une balise audio. Voici quelques liens pour en savoir plus :

Avantages :

Pas besoin de plug-in → Intégré dans le navigateur
Implémenté sur beaucoup de navigateurs

Inconvénients :

L'API Audio (création de musique directement dans la balise Audio en JS) n'est actuellement implémentée que sur les navigateurs basés sur Mozilla (donc pour l'instant à utiliser avec les préfixes propriétaires "moz").

VI. Bases de données en Javascript avec le WebSQL

Bien qu'utilisable, la spécification pour les WebSQL Database n'est plus activement maintenue par le W3C depuis Novembre 2010

Après le Web Storage, il est notable de voir apparaître un système structuré basé sur ce dernier. Les WSD permettent de stocker des bases de données dans le navigateur en local. Le système base ses requêtes sur le SQL, c'est ce conflit qui a provoqué l'arrêt de la maintenance des spécifications pour les WSD (voir plus haut). Malheureusement, ce système de DB n'est implémenté que par peu de navigateurs, ce qui le rends pratiquement inutilisable.

Bien que prometteur, ces WSD n'ont pas beaucoup de chances de renverser les autres systèmes de bases de données côté serveur. Il est compréhensible que les sociétés éditrices des navigateurs soient réticentes à implémenter ce système qui est encore instable et dont la spécification n'est plus développée. Si vous souhaitez en apprendre plus, visitez ces liens :

Avantages :

Données structurées

Inconvénients :

Implémenté sur très peu de navigateurs
Le travail sur les spécifications des WSD a été arrêté par le W3C

VII. Web Workers

Un Web Worker est une tâche exécutée en fond d'une application Javascript. Il peut être utile dans le cas d'opérations qui doivent s'exécuter séparément des principales car elles réclament des ressources plus importantes (grands calculs par exemple). Ces Workers peuvent envoyer des messages au code qui les a crée et vice-versa ce qui permet de faire passer des données entre les deux ou encore de prévenir le Worker de quand il doit commencer à travailler, et quand il doit s'arrêter. Créer un worker se fait de la façon suivante :

Code : JavaScript

1	var worker = new Worker("/chemin/vers/le/script/du/worker");

Une fois l'objet worker créé, le script de ce dernier est immédiatement exécuté. Du côté du script créateur du worker, l'instance a ces méthodes :

postMessage(message); - Envoie un message au Worker
terminate(); - Termine le dialogue avec le Worker. Une fois appelée, le Worker ne peut plus être redémarré. Sauf si on en crée un nouveau

Vous pouvez aussi ajouter des écouteurs aux événements suivants :

onmessage - Se déclenche lorsqu'un message du Worker est réceptionné. ev.data contient le message.
onerror - Se déclenche lorsqu'une erreur survient

Du côté du script du Worker, la méthode postMessage(message) envoie un message au script parent et l'événement onmessage reçoit les messages du script principal de la même manière qu'il reçoit ceux du Worker.

Dans le script parent au Worker, ces méthodes s'appliquent à l'instance de l'objet Worker. Dans le script du Worker, elles s'appliquent sur this ! Par exemple : this.onmessage = function(e) { this.postMessage("Test"); }; !

Exemple :

Code : HTML - index.html

<!doctype html>
<html>
	<head>
		<meta charset="utf8" />
		<title>Web Workers » Test</title>
	</head>
	<body>
		<div id="premiers"></div>
		<input type="text" id="jsq" value="100" />
		<button id="calculer">Calculer</button>
		
		<script>
			var worker = new Worker("worker.js"); // Nouveau worker
			
			document.querySelector("#calculer").addEventListener("mouseup", function() { // On envoie le message au Worker quand le bouton est cliqué
				worker.postMessage(document.querySelector("#jsq").value);
			}, true);
			
			worker.onmessage = function(e) { // Réception d'un message du worker
				var mess = e.data, span, text_span, text_glob, container = document.querySelector("#premiers");
				
				container.innerHTML = "<span style='text-decoration: underline;'>Nombres premiers jusqu'à " + document.querySelector("#jsq").value + " :</span> " + mess; // Affichage du résultat
			};
		</script>
	</body>
</html>

Code : JavaScript - worker.js

function fusArrays(array_1, array_2) {
	var res_array = array_1;
	
	for(var i=0; i<array_2.length; i++) {
		res_array.push(array_2[i]);
	}
	
	return res_array;
}

function arrayToString(array) {
	var res_string = "";
	
	for(var i=0; i<array.length; i++) {
		res_string += array[i];
		if(i < array.length - 1) {
			res_string += ",";
		}
	}
	
	return res_string;
}

function calculPremiers(fin) {
	if(fin <= 2) {
		return ['invalide'];
	}

	var nombres = [], premiers = [];
	
	for(var i=2; i<=fin; i++) {
		nombres.push({val: i, trait: false});
	}
	
	for(var j=0; j<=Math.sqrt(fin); j++) {
		if(nombres[j].trait) {
			continue;
		}
	
		var traitement = nombres[j].val;
			
		premiers.push(nombres[j].val);
	
		for(var i=traitement - 2; i<nombres.length; i+=traitement) {
			nombres[i].trait = true;
		}
	}
	
	var rest = [];
	
	for(var i=0; i<nombres.length; i++) {
		if(!nombres[i].trait) {
			rest.push(nombres[i].val);
		}
	}
	
	premiers = fusArrays(premiers, rest);
	
	return premiers;
}

this.onmessage = function(e) {
	var primary = calculPremiers(parseInt(e.data));
	
	this.postMessage(arrayToString(primary));
};

Tester

Ce code crée un Worker qui se charge de calculer les nombres premiers jusqu'à n. Dès réception d'un message, le worker le convertit en entier et calcule puis renvoie un message au code avec le résultat. Il y a dialogue entre le worker et le code principal. On peut schématiser cela de la sorte :

Dialogue entre le code principal et le worker

On peut créer des Workers dans les Workers, le Worker N°1 deviens alors le code principal du Worker N°2. Le code principal dialogue avec le Worker N°1 qui dialogue lui-même avec le Worker N°2. Mais le code principal ne peut pas dialoguer avec le Worker N°2. Voici un autre schéma :

Dialogue entre plusieurs workers l'un dans l'autre

Créer un worker dans un worker n'est pas la même chose que de créer deux workers séparés ! Dans le premier cas, on a le dialogue Code Principal ←→ Worker N°1 ←→ Worker N°2 tandis que dans le second on a le dialogue Code Principal ←→ Worker N°1 & 2

Liens :

Avantages :

Facile à mettre en place
Tâche de fond : vous pouvez faire autre-chose pendant qu'elle s'exécute

Inconvénients :

Plusieurs navigateurs ne l'implémentent pas encore ou pas totalement

VIII. FileSystem API

En rédaction.

IX. Compatibilité des fonctionnalités pour I.E, Opéra, Firefox, Safari et Google Chrome

Technologies	Opéra			Firefox				Safari		Google Chrome	I.E
Technologies	10	10.5	10.6	3	3.5	3.6	4	4	5	9	7	8	9	10
Query Selector
Web Storage
API Canvas
API Audio
API Vidéo
Bases de données Web SQL
Web Workers
FileSystem API
Pourcentage d'implémentation	50%	66,6%	100%	33,3%	75%	75%	75%	75%	100%	100%	0%	16,6%	66,6%	66,6%	59,98% (Moyenne)

Gears														?

12 → Version en développement / Version en Bêta

Sources :

X. Réagissez !

La discussion de ce sujet porte sur l'apparition de ces nouvelles technologies et du HTML5. Aubaine ou fardeau pour le développement ? Posez vos arguments et réagissez !

Rédigé par m@tteo78
Sources citées ci-dessus.

Édité le 02/06/2011 à 11:52:50 par m@tteo78

Non au KikooScript - Fonctionnalités nouvelles de Javascript apparentées HTML5 - JavaScript, une longue histoire
Librairie WoST pour la création de WebOS - Twitter de WoST
___________________

« Le forum vous aide mais n'est pas un distributeur de réponses. C'est en cherchant un peu soi-même que l'on apprends. »
« Membre du clan “LdZ = LDB” »
___________________

« Le patchwork de scripts JS est fortement déconseillé ! Codez vos propres scripts. »
___________________

Mozilla Developer Network - It's the web, you drive.

# Posté le 22/05/2011 à 00:56:34

restimel

# Posté le 22/05/2011 à 10:32:14

le Brimborion

Études : ENSEA

Pourquoi, pour Opera, tu t'es arrêté à la version 10.5 alors que cela fait un bon moment que la 11 est sortie ?
Comment calcules-tu ton pourcentage d'implémentation pour les fonctionnalités ? Il faudrait plutôt pondérer les valeurs par rapport aux parts de marché des navigateurs.
Comment calcules-tu ton pourcentage d'implémentation par navigateur ? Car Opera 10.5 a OUI partout et est marqué à 66%...
Pourquoi as-tu choisi ces fonctionnalités et pas d'autres ? comme la géolocalisation, les applications offline, les web-workers, les modifications avancées d'historique,... sans parler des API qui sont entre HTML et javascript (formulaires, microdata, ...)

Dans tes sources tu pourrais ajouter le site DiveIntoHTML5 (en) qui survole bien un certain nombre de fonctionnalités assimilées HTML5 (mais pas toutes).

Globalement, je trouve que ce qu'on appelle HTML5 apporte un grand nombre de nouveautés très intéressantes et permettra d'enrichir le contenu ou la manière de présenter du contenu sur le web. Et cela ne peut être que bien.

Cependant, comme le précise le site diveintohtml5, le HTML5 n'est pas UNE grande boîte à outils mais un regroupement de PLUSIEURS fonctionnalités (la preuve est que certaines fonctionnalités (comme canvas ou querySelector...) existaient bien avant qu'on parle de HTML5); et les spécifications restent ouvertes (c'est à dire que de nouvelles fonctionnalités peuvent toujours être ajoutées au fur et à mesure). Il est alors impossible de dire qu'un navigateur supporte 100% du HTML5.
Cela implique un inconvénient non négligeable: il est obligatoire de tester si les fonctionnalités qu'on souhaite utiliser sont supportées par le navigateur de l'utilisateur.
Un exemple typique était Canvas, où en fonction des outils utilisés (Shape, Text, Image, ...) les navigateurs le supportaient ou non. Maintenant tous les navigateurs le supportent dans son ensemble et on peut se passer de ces vérifications (il me semble cependant qu'il reste un point sur lequel IE9 n'est pas compatible).

Donc pour moi, je trouve que c'est plutôt une aubaine, bien que cela apporte des inconvénients (mais plus les navigateurs les supporteront et moins on sera obligé de faire ces vérifications)

Édité le 22/05/2011 à 10:48:36 par restimel

N'oubliez pas de mettre le sujet en résolu lorsque votre problème est réglé!

Le français c'est comme un langage de programmation: Si tu n'utilises pas les bonnes syntaxes, ton interlocuteur peut ne pas comprendre ce que tu veux faire.

Il n'existe pas de questions bêtes, il n'y a que des réponses bêtes.

m@tteo78

# Posté le 22/05/2011 à 10:57:33

Let me think about this..
Avatar

Citation : restimel

Pourquoi, pour Opera, tu t'es arrêté à la version 10.5 alors que cela fait un bon moment que la 11 est sortie?

Car la version 10.5 implémente tout ce que j'ai présenté, donc en toute logique les versions suivantes aussi.

Citation : restimel

Comment calcules-tu ton pourcentage d'implémentation pour les fonctionnalités? Il faudrait plutôt pondérer les valeurs par rapport à leur part de marché.

J'utilise un simple produit en croix. $\frac{x \times 100}{17}$ où x est le nombre de navigateurs (cités) dans toutes leurs versions (citées aussi) qui implémentent la fonctionnalité. Mais je pense que tu as raison, je n'aurais pas du prendre en compte les versions car cela fausse les résultats.

Citation : restimel

Comment calcules-tu ton pourcentage d'implémentation par navigateur? Car Opera 10.5 a OUI partout et est marqué à 66%...

Je calcule comme ci-dessus. Je ne suis pas sur qu'Opéra 10.5 implémente le WebSQL, j'attendais que quelqu'un me le confirme.

Citation : restimel

Pourquoi as-tu choisis ces fonctionnalités et pas d'autres? comme la géolocalisation, les applications offline, les web-workers, les modifications avancées d'historique,... sans parler des API qui sont entre HTML et javascript (formulaires, microdata, ...)

Je compte compléter l'article au fur et à mesure.

Citation : restimel

Dans tes sources tu pourrais ajouter le site DiveIntoHTML5 (en) qui survole bien un certain nombre de fonctionnalités assimilé HTML5 (mais pas toutes).

Merci du lien, je vais ajouter ça.

Citation : restimel

Donc pour moi, je trouve que c'est plutôt une aubaine, bien que cela apporte des inconvénients (mais plus les navigateurs les supporteront et moins on sera obligés de faire ces vérifications)

Je pense qu'actuellement il suffit d'une vérification au début du script du support de tous ce qu'il utilise comme fonctionnalités, et proposer des alternatives sinon.

restimel

# Posté le 22/05/2011 à 11:21:34

le Brimborion

Études : ENSEA

Cette réponse a aidé l'auteur du sujet

J'aime pas trop reprendre point à point ce qu'un autre a dit et rajouter mes commentaires entre, car cela donne souvent un signe de vouloir tout critiquer ce que dis l'autre. Donc je tiens à préciser que ce n'est pas dans la volonté d'en dire du mal si je le fais ici

Citation : m@tteo78

Citation : restimel

Pourquoi, pour Opera, tu t'es arrêté à la version 10.5 alors que cela fait un bon moment que la 11 est sortie?

Car la version 10.5 implémente tout ce que j'ai présenté, donc en toute logique les versions suivantes aussi.

Disons que tu l'avais fait pour Chrome, c'est pour ça que ça m'a étonné de ne pas le voir pour Opéra.
En fait pour éviter d'avoir un tableau qui s'allonge au fur et à mesure des versions (surtout avec Chrome qui sort une nouvelle version très rapidement).
Tu devrais plutôt écrire juste le numéro de version à partir de laquelle la fonctionnalité est supportée (quitte à faire des sous catégories pour Opera-mini, Safari Iphone, ... qui n'ont pas le même support que leur version équivalente Desktop)
Mais cela impliquera que le calcul de % d'implémentation sera moins compréhensible.

Citation : m@tteo78

Citation : restimel

Comment calcules-tu ton pourcentage d'implémentation par navigateur? Car Opera 10.5 a OUI partout et est marqué à 66%...

Je calcule comme ci-dessus. Je ne suis pas sur qu'Opéra 10.5 implémente le WebSQL, j'attendais que quelqu'un me le confirme.

D'après le site DiveIntoHtml5 cela semble être le cas, mais je n'ai plus cette version pour vérifier.

Citation : m@tteo78

Citation : restimel

Je compte compléter l'article au fur et à mesure.

Bonne chance! car cela risque de te demander pas mal de travail

À plus ou moins long termes, je pensais écrire un tutoriel sur le site du zéro à propos des web-workers (programmation parallèle en javascript)

Citation : m@tteo78

Je pense qu'actuellement il suffit d'une vérification au début du script du support de tous ce qu'il utilise comme fonctionnalités, et proposer des alternatives sinon.

Oui c'est faisable, mais cela dépend du projet et de la fonctionnalité.
Personnellement je préfère la vérifier au moment de l'utiliser comme on le fait actuellement pour les propriétés javascript qui ne sont pas compatible. Cela permet d'écrire un contournement localement.
Si par contre c'est une fonctionnalité très importante pour le site, alors oui il vaut mieux la tester dès le début et proposer immédiatement un contournement.

m@tteo78

# Posté le 22/05/2011 à 11:28:19

Let me think about this..
Avatar

Je vais essayer de raccourcir un peu cela oui. J'ai retiré le % d'implémentation des fonctionnalités, je garde seulement par navigateur car cela causait des ambiguïtés. Je me suis un peu renseigné sur les Workers, ça a l'air vraiment intéressant.
Un mini-tuto oui ce serait intéressant avec une pratique.
Pour Opéra je le laisse comme ça tant que je n'en sais pas plus >_<

EDIT : Comparatif des Web Workers ajouté. Paragraphe en rédaction.

EDIT 2 : Paragraphe ajouté (Workers). Vos avis ?

Édité le 22/05/2011 à 14:48:50 par m@tteo78

m@tteo78

# Posté le 23/05/2011 à 19:31:40

Let me think about this..
Avatar

Ajout d'une introduction sur la détection des fonctionnalités HTML5.

Golmote

# Posté le 23/05/2011 à 20:18:19

Tibadibadoum §

Blog
Twitter

Ville : Lormont
Pays : France métropolitaine

Ce topic est intéressant, mais n'aurait-il pas plus de valeur posté dans les articles, les news ou encore les tutos ?

Pour abréger JavaScript, on dit JS, pas Java.
Java != JavaScript
Sachez aussi que vous aider est éprouvant.
Veuillez excuser les désagréments causés.

WTF, on m'a interviewé.

m@tteo78

# Posté le 24/05/2011 à 18:48:20

Let me think about this..
Avatar

Certes mais au niveau de la rédaction je ne suis pas des plus forts...

EDIT : Ajout d'une table des matières, terminaison du paragraphe sur la détection des différentes technologies HTML5 et complétion du paragraphe sur les Query Selectors.

Édité le 24/05/2011 à 19:21:28 par m@tteo78

xavierm02

# Posté le 24/05/2011 à 20:32:20

Tout est ℤ

Blog
Twitter

Ville : Sceaux
Pays : France métropolitaine
Études : Lycée Lakanal - Sceaux

Cette réponse a aidé l'auteur du sujet

Btw, la grosse différence entre les querySelector et le reste, c'est que les querySelector retournent des array quand les autres fonctions retournent des LiveNodeList.
Code : JavaScript

var container = document.createElement( "div" );
var children = container.getElementsByTagName( "*" );
console.log( children.length );// 0
container.appendChild( document.createElement( "span" ) );
console.log( children.length );// 1

Code : JavaScript

var container = document.createElement( "div" );
var children = container.querySelectorAll( "*" );
console.log( children.length );// 0
container.appendChild( document.createElement( "span" ) );
console.log( children.length );// 0

Et c'est vrai que ce serait mieux en tutoriel / article.
Ne serais-ce que pour l'organisation.

Édité le 24/05/2011 à 20:32:57 par xavierm02

m@tteo78

# Posté le 24/05/2011 à 21:01:09

Let me think about this..
Avatar

Citation : xavierm02

Btw, la grosse différence entre les querySelector et le reste, c'est que les querySelector retournent des array quand les autres fonctions retournent des LiveNodeList.
Code : JavaScript

var container = document.createElement( "div" );
var children = container.getElementsByTagName( "*" );
console.log( children.length );// 0
container.appendChild( document.createElement( "span" ) );
console.log( children.length );// 1

Code : JavaScript

var container = document.createElement( "div" );
var children = container.querySelectorAll( "*" );
console.log( children.length );// 0
container.appendChild( document.createElement( "span" ) );
console.log( children.length );// 0

Je vais corriger cela, merci.

Citation : xavierm02

Et c'est vrai que ce serait mieux en tutoriel / article.
Ne serais-ce que pour l'organisation.

Je vais envisager cela (et surtout préparer).

lieo

# Posté le 24/05/2011 à 21:48:35

2+2=5

Même si je suis pas trop apte à aider la complétion de l'article, je vais au moins dire un merci. J'ai jamais fais de réel recherche sur les nouveautés; et les mises à jour régulière, permettent d'avoir un "article" qui deviens complet et intéressant.
Notamment les query selector (lors de la création du sujet, je ne comprenais toujours pas, alors que maintenant c'est acquis). De même Modernizr et quelque chose à garder sous la main (la compatibilité et complète vis à vis d'IE ?).

Je te dis bon courage et continuation dans ton travail, hésite pas à mettre des exemples pratique, c'est un peu ce que j'aime le plus (la pratique vaut tout les mots :lol:

).

Ps: je suis d'accord que niveau lisibilité il est dommage que ce ne soit pas en article ou en tutoriel, le forum est mal adapté pour de tel article (niveau taille et longueur).

Édité le 24/05/2011 à 21:49:58 par lieo

restimel

# Posté le 25/05/2011 à 11:53:36

le Brimborion

Études : ENSEA

Cette réponse a aidé l'auteur du sujet

Pour les fonctionnalités Web workers. Aucune version de Firefox ne supporte complètement les web-worker (il n'y a que les fonctionnalité de base, les shared worker ne sont pas supportées)

Et je n'arrive pas à trouver de source indiquant qu'IE les supportait (d'après le MDC, IE9 ne supporterait pas les web-worker (même de base)).

Édité le 25/05/2011 à 11:54:22 par restimel

m@tteo78

# Posté le 25/05/2011 à 14:52:28

Let me think about this..
Avatar

Citation : restimel

Pour les Workers, je n'avais pas vu. Et je n'étais pas sûr pour IE, c'est corrigé.

Ajout d'un paragraphe sur Gears.

m@tteo78

# Posté le 31/05/2011 à 18:24:29

Let me think about this..
Avatar

Ajout des liens pour tester les exemples, révision de l'exemple sur le Web Storage

berseker59

# Posté le 31/05/2011 à 19:18:45

Javascripteur averti
Avatar

Salut, c'est très intéressant, selon moi, tu devrais en faire un tutoriel 'Indroduction aux nouvelles technologies du web' ou quelque chose comme ca.

Une seule chose, le pourcentage d'implémentation devrais être calculé en fonction des parts du marché des navigateurs.

Berseker59

m@tteo78

# Posté le 31/05/2011 à 19:24:01

Let me think about this..
Avatar

Citation : berseker59

Salut, c'est très intéressant, selon moi, tu devrais en faire un tutoriel 'Indroduction aux nouvelles technologies du web' ou quelque chose comme ca.

Je l'envisage en effet.

Citation : berseker59

Une seule chose, le pourcentage d'implémentation devrais être calculé en fonction des parts du marché des navigateurs.

Tu veux dire le pourcentage final (moyen) ?

berseker59

# Posté le 02/06/2011 à 05:09:23

Javascripteur averti
Avatar

Citation : m@tteo78

Citation : berseker59

Une seule chose, le pourcentage d'implémentation devrais être calculé en fonction des parts du marché des navigateurs.

Tu veux dire le pourcentage final (moyen) ?

Je ne comprend pas ce que tu dis, mais ce que je veux dire c'est que si par exemple, A a 90% du marché et implémente les web wokers et que B a 10% du marché et ne les implémente pas, le pourcentage d'implémentation sera de 90%.

winzou

# Posté le 02/06/2011 à 09:20:00

lala

Blog
Twitter

Ville : Singapour
Pays : Singapour
Études : Ecole Centrale de Lyon

Dans le meme sujet, ces slides sont tres sympas : http://slides.html5rocks.com (pour ceux qui ne les connaissaient pas deja)

Un tutoriel pour débuter avec le framework Symfony2.
Chapitre en beta-test : Déployer son site Symfony2 en production, donnez vos avis !

Je recherche toujours quelqu'un capable de faire des icônes sympas pour les chapitres du tutoriel, contactez-moi, merci !

m@tteo78

# Posté le 02/06/2011 à 11:38:03

Let me think about this..
Avatar

Citation : berseker59

Citation : m@tteo78

Citation : berseker59

Une seule chose, le pourcentage d'implémentation devrais être calculé en fonction des parts du marché des navigateurs.

Tu veux dire le pourcentage final (moyen) ?

C'est bien ce que je voulais dire, je vais voir.

Citation : winzou

Dans le meme sujet, ces slides sont tres sympas : http://slides.html5rocks.com (pour ceux qui ne les connaissaient pas deja)

Nice !

explo-franck

# Posté le 29/12/2011 à 19:52:12

Juste un petit lien pour ce qui concerne Filesystem. J'ai pas tout compris, mais ça peut aider pour la rédaction du chapitre VIII à venir.
Au passage très bon exemple sur les Web Workers.
Pour l'instant il y a quand même très peu de littérature en français sur ces sujets.

Golmote

# Posté le 29/12/2011 à 22:43:02

Tibadibadoum §

Blog
Twitter

Ville : Lormont
Pays : France métropolitaine

Ce topic n'a pas rapport au tuto JS officiel, à ma connaissance.

En revanche, la démo dans ton lien est intéressante.

Pour abréger JavaScript, on dit JS, pas Java.
Java != JavaScript
Sachez aussi que vous aider est éprouvant.
Veuillez excuser les désagréments causés.

WTF, on m'a interviewé.

Retour au forum "Javascript" ou à la liste des forums

Pour accéder à cette section
Connectez-vous !

Les cours phares

Tous les cours par catégories

Autres

Programmation (263 Cours)

Graphisme (29 Cours)

Bureautique (27 Cours)

Jeux Vidéo (18 Cours)

Matériel (7 Cours)

Dernières annonces

Recrutement à Bac / Bac +1

Recrutement à Bac +2

Recrutement à Bac +3 / Bac +4

Recrutement à Bac +5

Dynamisez vos sites web avec JavaScript

Créez des applications pour iPhone, iPad et iPod Touch

Cours

Nouveau ?

Nouveautés

Site Web

Programmation

Bases de données

Mobiles

Systèmes d'exploitation

Graphisme

Infographie 3D

Bureautique

Réseaux

Matériel

Mapping

Fonctionnalités de Javascript apparentées HTML5

Explications et comparatifs

Présentation des fonctionnalités Javascript apparentées à HTML5

Table des matières

I. Détection de la prise en compte des fonctionnalités de HTML5

II. Proposez une alternative pour les navigateurs qui ne supportent pas les nouvelles fonctionnalités

III. Query Selectors

IV. Web Storage

V. Balises de média

VI. Bases de données en Javascript avec le WebSQL

VII. Web Workers

VIII. FileSystem API

IX. Compatibilité des fonctionnalités pour I.E, Opéra, Firefox, Safari et Google Chrome

X. Réagissez !

Lire aussi