-
Salut! Je m'appelle Lloyd Hilaiel, et je travaille à Mozilla Labs avec Marcio Galli.
-
Dans cette vidéo nous vous donnons un aperçu du projet Chromeless.
-
Chromeless est une expérience qui vise à rendre plus facile la mise en œuvre
-
de nouvelles idées concernant les interfaces utilisateur sur le web.
-
Le but est de faire participer davantage de personnes au débat
-
sur l'apparence que devrait avoir un navigateur web.
-
Et sur comment il devrait marcher.
-
Techniquement, Chromeless n'est pas une grande innovation.
-
Nous avons simplement repris XULrunner, l'application sur laquelle
-
Firefox et Thunderbird sont basés
-
et ajouté une fine couche d'abstraction.
-
Cette couche permet de construire rapidement un navigateur web
-
en utilisant des technologies web, comme html, javascript ou css.
-
Dans Chromeless, un unique document html
-
définit l'interface utilisateur du navigateur à proprement parler.
-
Pour faciliter la communication, nous avons appelé
-
ce document html le "code navigateur".
-
De la même manière qu'un navigateur web courant peut contenir d'autres sites et iframes
-
ce navigateur peut aussi le faire.
-
mais il a des privilèges étendus pour modifier et surveiller
-
le contenu autour de cet iframe.
-
Cette idée de récupérer des concepts web existants
-
et de les enrichir légèrement
-
est le principe de base de Chromeless.
-
Bien! Faisons un point sur ce que vous pouvez faire.
-
Ce que vous voyez à présent est un navigateur web
-
simple mais fonctionnel.
-
Ici vous pouvez voir un document hmtl basique qui affiche un champ de texte
-
où vous pouvez entrez une url et un iframe
-
où ira le contenu du l'url en question.
-
Avec Chromeless, c'est véritablement tout le code dont vous avez besoin pour
-
créer un navigateur.
-
Allons un peu plus loin.
-
Et si vous vouliez permettre à l'utilisateur d'utiliser un mode plein écran?
-
Afficher en plein écran est clairement quelque chose
-
qu'un site web normal ne peut pas faire.
-
Nous avons donc besoin d'une nouvelle API.
-
Dans Chromeless, on accède à de nouvelles API en
-
utilisant la fonction globale require.
-
Dans ce cas, nous importons la bibliothèque misc.
-
Ce nom "misc" est un simple raccourci
-
mais il offre une fonction "plein écran" que nous pouvons utiliser
-
pour commuter le mode du navigateur.
-
Cette fonction sera appelée par un bouton
-
cliquable.
-
Avec 4 lignes de code supplémentaires, notre navigateur a maintenant
-
un mode plein écran.
-
Essayons quelque chose de plus élaboré
-
en combinant quelques nouvelles idées.
-
Premièrement, comme nous l'avons déjà mentionné, le code navigateur
-
a des privilèges particuliers pour la surveillance du contenu des iframes.
-
Un exemple de ceci est l’événement expérimental dom load
-
appelé quand un nouveau contenu est chargé dans un iframe.
-
L'autre outil que nous allons utiliser est la bibliothèque dom shot
-
qui permet de récupérer une capture graphique d'un nœud donné du dom.
-
Cette fonction renvoie une url de données qui
-
contient des données d'image ping.
-
Marcio a combiné ces fonctionnalités et un peu de
-
jquery pour construire ce navigateur de démonstration.
-
Il vous permet de voir des aperçu de vos onglets ouverts sous forme de vignette
-
avec une déformation œil de poisson.
-
Nous espérons vous avoir donné un bon aperçu de
-
Chromeless.
-
Pour en savoir plus, nous vous recommandons
-
de récupérer le code sur github et de suivre le tutoriel inclus.
-
Même si certaines des API que je viens de vous montrer ont changées
-
les principes de base de Chromeless sont sûrement les mêmes.
-
Si vous avez des idées pour Chromeless, ou si vous voulez
-
participer, vous pouvez nous rejoindre aux endroits habituels
-
sur IRC ou notre liste mail.
-
Merci de votre attention.
