WEBVTT 00:00:01.668 --> 00:00:04.905 Salut! Je m'appelle Lloyd Hilaiel, et je travaille à Mozilla Labs avec Marcio Galli. 00:00:04.905 --> 00:00:09.710 Dans cette vidéo nous vous donnons un aperçu du projet Chromeless. 00:00:09.710 --> 00:00:13.547 Chromeless est une expérience qui vise à rendre plus facile la mise en œuvre 00:00:13.547 --> 00:00:16.917 de nouvelles idées concernant les interfaces utilisateur sur le web. 00:00:16.917 --> 00:00:19.122 Le but est de faire participer davantage de personnes au débat 00:00:19.122 --> 00:00:21.622 sur l'apparence que devrait avoir un navigateur web. 00:00:21.622 --> 00:00:23.954 Et sur comment il devrait marcher. 00:00:23.954 --> 00:00:26.828 Techniquement, Chromeless n'est pas une grande innovation. 00:00:26.828 --> 00:00:30.130 Nous avons simplement repris XULrunner, l'application sur laquelle 00:00:30.130 --> 00:00:31.932 Firefox et Thunderbird sont basés 00:00:31.932 --> 00:00:34.735 et ajouté une fine couche d'abstraction. 00:00:34.735 --> 00:00:37.804 Cette couche permet de construire rapidement un navigateur web 00:00:37.804 --> 00:00:42.509 en utilisant des technologies web, comme html, javascript ou css. 00:00:42.509 --> 00:00:45.412 Dans Chromeless, un unique document html 00:00:45.412 --> 00:00:48.588 définit l'interface utilisateur du navigateur à proprement parler. 00:00:48.588 --> 00:00:50.517 Pour faciliter la communication, nous avons appelé 00:00:50.517 --> 00:00:54.152 ce document html le "code navigateur". 00:00:54.152 --> 00:00:57.457 De la même manière qu'un navigateur web courant peut contenir d'autres sites et iframes 00:00:57.457 --> 00:00:59.960 ce navigateur peut aussi le faire. 00:00:59.960 --> 00:01:02.696 mais il a des privilèges étendus pour modifier et surveiller 00:01:02.696 --> 00:01:05.149 le contenu autour de cet iframe. 00:01:05.149 --> 00:01:08.035 Cette idée de récupérer des concepts web existants 00:01:08.035 --> 00:01:10.237 et de les enrichir légèrement 00:01:10.237 --> 00:01:13.106 est le principe de base de Chromeless. 00:01:13.106 --> 00:01:17.611 Bien! Faisons un point sur ce que vous pouvez faire. 00:01:17.611 --> 00:01:20.080 Ce que vous voyez à présent est un navigateur web 00:01:20.080 --> 00:01:21.816 simple mais fonctionnel. 00:01:21.816 --> 00:01:24.584 Ici vous pouvez voir un document hmtl basique qui affiche un champ de texte 00:01:24.584 --> 00:01:27.788 où vous pouvez entrez une url et un iframe 00:01:27.788 --> 00:01:30.157 où ira le contenu du l'url en question. 00:01:30.157 --> 00:01:32.395 Avec Chromeless, c'est véritablement tout le code dont vous avez besoin pour 00:01:32.395 --> 00:01:34.328 créer un navigateur. 00:01:34.328 --> 00:01:35.596 Allons un peu plus loin. 00:01:35.596 --> 00:01:38.403 Et si vous vouliez permettre à l'utilisateur d'utiliser un mode plein écran? 00:01:38.403 --> 00:01:40.634 Afficher en plein écran est clairement quelque chose 00:01:40.634 --> 00:01:42.903 qu'un site web normal ne peut pas faire. 00:01:42.903 --> 00:01:45.247 Nous avons donc besoin d'une nouvelle API. 00:01:45.247 --> 00:01:47.729 Dans Chromeless, on accède à de nouvelles API en 00:01:47.729 --> 00:01:50.629 utilisant la fonction globale require. 00:01:50.629 --> 00:01:54.014 Dans ce cas, nous importons la bibliothèque misc. 00:01:54.014 --> 00:01:55.931 Ce nom "misc" est un simple raccourci 00:01:55.931 --> 00:01:58.585 mais il offre une fonction "plein écran" que nous pouvons utiliser 00:01:58.585 --> 00:02:01.221 pour commuter le mode du navigateur. 00:02:01.221 --> 00:02:03.638 Cette fonction sera appelée par un bouton 00:02:03.638 --> 00:02:05.336 cliquable. 00:02:05.336 --> 00:02:07.896 Avec 4 lignes de code supplémentaires, notre navigateur a maintenant 00:02:07.896 --> 00:02:10.931 un mode plein écran. 00:02:10.931 --> 00:02:12.966 Essayons quelque chose de plus élaboré 00:02:12.966 --> 00:02:14.601 en combinant quelques nouvelles idées. 00:02:14.601 --> 00:02:16.960 Premièrement, comme nous l'avons déjà mentionné, le code navigateur 00:02:16.960 --> 00:02:21.241 a des privilèges particuliers pour la surveillance du contenu des iframes. 00:02:21.241 --> 00:02:24.878 Un exemple de ceci est l’événement expérimental dom load 00:02:24.878 --> 00:02:28.682 appelé quand un nouveau contenu est chargé dans un iframe. 00:02:28.682 --> 00:02:31.418 L'autre outil que nous allons utiliser est la bibliothèque dom shot 00:02:31.418 --> 00:02:34.788 qui permet de récupérer une capture graphique d'un nœud donné du dom. 00:02:34.788 --> 00:02:37.391 Cette fonction renvoie une url de données qui 00:02:37.391 --> 00:02:40.227 contient des données d'image ping. 00:02:40.227 --> 00:02:42.629 Marcio a combiné ces fonctionnalités et un peu de 00:02:42.629 --> 00:02:44.624 jquery pour construire ce navigateur de démonstration. 00:02:44.624 --> 00:02:48.072 Il vous permet de voir des aperçu de vos onglets ouverts sous forme de vignette 00:02:48.072 --> 00:02:50.938 avec une déformation œil de poisson. 00:02:50.938 --> 00:02:53.707 Nous espérons vous avoir donné un bon aperçu de 00:02:53.707 --> 00:02:55.308 Chromeless. 00:02:55.308 --> 00:02:56.844 Pour en savoir plus, nous vous recommandons 00:02:56.844 --> 00:03:00.080 de récupérer le code sur github et de suivre le tutoriel inclus. 00:03:00.080 --> 00:03:03.150 Même si certaines des API que je viens de vous montrer ont changées 00:03:03.150 --> 00:03:06.954 les principes de base de Chromeless sont sûrement les mêmes. 00:03:06.954 --> 00:03:08.989 Si vous avez des idées pour Chromeless, ou si vous voulez 00:03:08.989 --> 00:03:11.792 participer, vous pouvez nous rejoindre aux endroits habituels 00:03:11.792 --> 00:03:13.933 sur IRC ou notre liste mail. 00:03:13.933 --> 99:59:59.999 Merci de votre attention.