[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.67,0:00:04.90,Default,,0000,0000,0000,,Salut! Je m'appelle Lloyd Hilaiel, et je travaille à Mozilla Labs avec Marcio Galli.
Dialogue: 0,0:00:04.90,0:00:09.71,Default,,0000,0000,0000,,Dans cette vidéo nous vous donnons un aperçu du projet Chromeless.
Dialogue: 0,0:00:09.71,0:00:13.55,Default,,0000,0000,0000,,Chromeless est une expérience qui vise à rendre plus facile la mise en œuvre
Dialogue: 0,0:00:13.55,0:00:16.92,Default,,0000,0000,0000,,de nouvelles idées concernant les interfaces utilisateur sur le web.
Dialogue: 0,0:00:16.92,0:00:19.12,Default,,0000,0000,0000,,Le but est de faire participer davantage de personnes au débat
Dialogue: 0,0:00:19.12,0:00:21.62,Default,,0000,0000,0000,,sur l'apparence que devrait avoir un navigateur web.
Dialogue: 0,0:00:21.62,0:00:23.95,Default,,0000,0000,0000,,Et sur comment il devrait marcher.
Dialogue: 0,0:00:23.95,0:00:26.83,Default,,0000,0000,0000,,Techniquement, Chromeless n'est pas une grande innovation.
Dialogue: 0,0:00:26.83,0:00:30.13,Default,,0000,0000,0000,,Nous avons simplement repris XULrunner, l'application sur laquelle
Dialogue: 0,0:00:30.13,0:00:31.93,Default,,0000,0000,0000,,Firefox et Thunderbird sont basés
Dialogue: 0,0:00:31.93,0:00:34.74,Default,,0000,0000,0000,,et ajouté une fine couche d'abstraction.
Dialogue: 0,0:00:34.74,0:00:37.80,Default,,0000,0000,0000,,Cette couche permet de construire rapidement un navigateur web
Dialogue: 0,0:00:37.80,0:00:42.51,Default,,0000,0000,0000,,en utilisant des technologies web, comme html, javascript ou css.
Dialogue: 0,0:00:42.51,0:00:45.41,Default,,0000,0000,0000,,Dans Chromeless, un unique document html
Dialogue: 0,0:00:45.41,0:00:48.59,Default,,0000,0000,0000,,définit l'interface utilisateur du navigateur à proprement parler.
Dialogue: 0,0:00:48.59,0:00:50.52,Default,,0000,0000,0000,,Pour faciliter la communication, nous avons appelé
Dialogue: 0,0:00:50.52,0:00:54.15,Default,,0000,0000,0000,,ce document html le "code navigateur".
Dialogue: 0,0:00:54.15,0:00:57.46,Default,,0000,0000,0000,,De la même manière qu'un navigateur web courant peut contenir d'autres sites et iframes
Dialogue: 0,0:00:57.46,0:00:59.96,Default,,0000,0000,0000,,ce navigateur peut aussi le faire.
Dialogue: 0,0:00:59.96,0:01:02.70,Default,,0000,0000,0000,,mais il a des privilèges étendus pour modifier et surveiller
Dialogue: 0,0:01:02.70,0:01:05.15,Default,,0000,0000,0000,,le contenu autour de cet iframe.
Dialogue: 0,0:01:05.15,0:01:08.04,Default,,0000,0000,0000,,Cette idée de récupérer des concepts web existants
Dialogue: 0,0:01:08.04,0:01:10.24,Default,,0000,0000,0000,,et de les enrichir légèrement
Dialogue: 0,0:01:10.24,0:01:13.11,Default,,0000,0000,0000,,est le principe de base de Chromeless.
Dialogue: 0,0:01:13.11,0:01:17.61,Default,,0000,0000,0000,,Bien! Faisons un point sur ce que vous pouvez faire.
Dialogue: 0,0:01:17.61,0:01:20.08,Default,,0000,0000,0000,,Ce que vous voyez à présent est un navigateur web
Dialogue: 0,0:01:20.08,0:01:21.82,Default,,0000,0000,0000,,simple mais fonctionnel.
Dialogue: 0,0:01:21.82,0:01:24.58,Default,,0000,0000,0000,,Ici vous pouvez voir un document hmtl basique qui affiche un champ de texte
Dialogue: 0,0:01:24.58,0:01:27.79,Default,,0000,0000,0000,,où vous pouvez entrez une url et un iframe
Dialogue: 0,0:01:27.79,0:01:30.16,Default,,0000,0000,0000,,où ira le contenu du l'url en question.
Dialogue: 0,0:01:30.16,0:01:32.40,Default,,0000,0000,0000,,Avec Chromeless, c'est véritablement tout le code dont vous avez besoin pour
Dialogue: 0,0:01:32.40,0:01:34.33,Default,,0000,0000,0000,,créer un navigateur.
Dialogue: 0,0:01:34.33,0:01:35.60,Default,,0000,0000,0000,,Allons un peu plus loin.
Dialogue: 0,0:01:35.60,0:01:38.40,Default,,0000,0000,0000,,Et si vous vouliez permettre à l'utilisateur d'utiliser un mode plein écran?
Dialogue: 0,0:01:38.40,0:01:40.63,Default,,0000,0000,0000,,Afficher en plein écran est clairement quelque chose
Dialogue: 0,0:01:40.63,0:01:42.90,Default,,0000,0000,0000,,qu'un site web normal ne peut pas faire.
Dialogue: 0,0:01:42.90,0:01:45.25,Default,,0000,0000,0000,,Nous avons donc besoin d'une nouvelle API.
Dialogue: 0,0:01:45.25,0:01:47.73,Default,,0000,0000,0000,,Dans Chromeless, on accède à de nouvelles API en
Dialogue: 0,0:01:47.73,0:01:50.63,Default,,0000,0000,0000,,utilisant la fonction globale require.
Dialogue: 0,0:01:50.63,0:01:54.01,Default,,0000,0000,0000,,Dans ce cas, nous importons la bibliothèque misc.
Dialogue: 0,0:01:54.01,0:01:55.93,Default,,0000,0000,0000,,Ce nom "misc" est un simple raccourci
Dialogue: 0,0:01:55.93,0:01:58.58,Default,,0000,0000,0000,,mais il offre une fonction "plein écran" que nous pouvons utiliser
Dialogue: 0,0:01:58.58,0:02:01.22,Default,,0000,0000,0000,,pour commuter le mode du navigateur.
Dialogue: 0,0:02:01.22,0:02:03.64,Default,,0000,0000,0000,,Cette fonction sera appelée par un bouton
Dialogue: 0,0:02:03.64,0:02:05.34,Default,,0000,0000,0000,,cliquable.
Dialogue: 0,0:02:05.34,0:02:07.90,Default,,0000,0000,0000,,Avec 4 lignes de code supplémentaires, notre navigateur a maintenant
Dialogue: 0,0:02:07.90,0:02:10.93,Default,,0000,0000,0000,,un mode plein écran.
Dialogue: 0,0:02:10.93,0:02:12.97,Default,,0000,0000,0000,,Essayons quelque chose de plus élaboré
Dialogue: 0,0:02:12.97,0:02:14.60,Default,,0000,0000,0000,,en combinant quelques nouvelles idées.
Dialogue: 0,0:02:14.60,0:02:16.96,Default,,0000,0000,0000,,Premièrement, comme nous l'avons déjà mentionné, le code navigateur
Dialogue: 0,0:02:16.96,0:02:21.24,Default,,0000,0000,0000,,a des privilèges particuliers pour la surveillance du contenu des iframes.
Dialogue: 0,0:02:21.24,0:02:24.88,Default,,0000,0000,0000,,Un exemple de ceci est l’événement expérimental dom load
Dialogue: 0,0:02:24.88,0:02:28.68,Default,,0000,0000,0000,,appelé quand un nouveau contenu est chargé dans un iframe.
Dialogue: 0,0:02:28.68,0:02:31.42,Default,,0000,0000,0000,,L'autre outil que nous allons utiliser est la bibliothèque dom shot
Dialogue: 0,0:02:31.42,0:02:34.79,Default,,0000,0000,0000,,qui permet de récupérer une capture graphique d'un nœud donné du dom.
Dialogue: 0,0:02:34.79,0:02:37.39,Default,,0000,0000,0000,,Cette fonction renvoie une url de données qui
Dialogue: 0,0:02:37.39,0:02:40.23,Default,,0000,0000,0000,,contient des données d'image ping.
Dialogue: 0,0:02:40.23,0:02:42.63,Default,,0000,0000,0000,,Marcio a combiné ces fonctionnalités et un peu de
Dialogue: 0,0:02:42.63,0:02:44.62,Default,,0000,0000,0000,,jquery pour construire ce navigateur de démonstration.
Dialogue: 0,0:02:44.62,0:02:48.07,Default,,0000,0000,0000,,Il vous permet de voir des aperçu de vos onglets ouverts sous forme de vignette
Dialogue: 0,0:02:48.07,0:02:50.94,Default,,0000,0000,0000,,avec une déformation œil de poisson.
Dialogue: 0,0:02:50.94,0:02:53.71,Default,,0000,0000,0000,,Nous espérons vous avoir donné un bon aperçu de
Dialogue: 0,0:02:53.71,0:02:55.31,Default,,0000,0000,0000,,Chromeless.
Dialogue: 0,0:02:55.31,0:02:56.84,Default,,0000,0000,0000,,Pour en savoir plus, nous vous recommandons
Dialogue: 0,0:02:56.84,0:03:00.08,Default,,0000,0000,0000,,de récupérer le code sur github et de suivre le tutoriel inclus.
Dialogue: 0,0:03:00.08,0:03:03.15,Default,,0000,0000,0000,,Même si certaines des API que je viens de vous montrer ont changées
Dialogue: 0,0:03:03.15,0:03:06.95,Default,,0000,0000,0000,,les principes de base de Chromeless sont sûrement les mêmes.
Dialogue: 0,0:03:06.95,0:03:08.99,Default,,0000,0000,0000,,Si vous avez des idées pour Chromeless, ou si vous voulez
Dialogue: 0,0:03:08.99,0:03:11.79,Default,,0000,0000,0000,,participer, vous pouvez nous rejoindre aux endroits habituels
Dialogue: 0,0:03:11.79,0:03:13.93,Default,,0000,0000,0000,,sur IRC ou notre liste mail.
Dialogue: 0,0:03:13.93,9:59:59.99,Default,,0000,0000,0000,,Merci de votre attention.