Return to Video

Introducing Chromeless

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

French subtitles

Revisions Compare revisions