[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.58,0:00:05.15,Default,,0000,0000,0000,,Salut, je suis James Long et je vais vous présenter Mortar.
Dialogue: 0,0:00:06.23,0:00:07.92,Default,,0000,0000,0000,,Mortar est un ensemble de modèles de projets
Dialogue: 0,0:00:07.92,0:00:10.42,Default,,0000,0000,0000,,destinés à débuter rapidement l'écriture d'une appli Web.
Dialogue: 0,0:00:10.42,0:00:13.10,Default,,0000,0000,0000,,Pour commencer, allez sur le site pour développeurs
Dialogue: 0,0:00:13.10,0:00:17.21,Default,,0000,0000,0000,,marketplace.firefox.com/developers.
Dialogue: 0,0:00:17.21,0:00:18.88,Default,,0000,0000,0000,,Cliquez sur "Build your app"
Dialogue: 0,0:00:20.45,0:00:24.12,Default,,0000,0000,0000,,puis sur "App Templates".
Dialogue: 0,0:00:24.12,0:00:27.18,Default,,0000,0000,0000,,Voici la liste des modèles disponibles
Dialogue: 0,0:00:27.18,0:00:30.55,Default,,0000,0000,0000,,et des instructions pour les installer.
Dialogue: 0,0:00:30.55,0:00:33.05,Default,,0000,0000,0000,,Il y a également un lien vers le dépôt contenant Mortar sur Github,
Dialogue: 0,0:00:33.05,0:00:36.89,Default,,0000,0000,0000,,qui contient tous les modèles disponibles comme des sous-projets.
Dialogue: 0,0:00:36.89,0:00:41.73,Default,,0000,0000,0000,,Il y a les modèles app-stub, game-stub, une liste et un affichage à onglets.
Dialogue: 0,0:00:41.73,0:00:44.32,Default,,0000,0000,0000,,Vous trouverez sur le site les instructions pour les installer
Dialogue: 0,0:00:44.32,0:00:48.05,Default,,0000,0000,0000,,et d'autres informations à leur sujet.
Dialogue: 0,0:00:48.05,0:00:50.97,Default,,0000,0000,0000,,Je vais commencer à partir d'ici.
Dialogue: 0,0:00:50.97,0:00:54.54,Default,,0000,0000,0000,,App Stub est un modèle minimaliste avec quelques fonctionnalités déjà branchées
Dialogue: 0,0:00:54.54,0:00:56.68,Default,,0000,0000,0000,,Voici à quoi il ressemble lorsque vous l'installez.
Dialogue: 0,0:00:56.68,0:00:58.78,Default,,0000,0000,0000,,Il n'y a qu'un bouton pour installer l'application
Dialogue: 0,0:00:59.84,0:01:02.54,Default,,0000,0000,0000,,En regardant le fichier index.html, on voit qu'il ne contient pas grand chose,
Dialogue: 0,0:01:02.54,0:01:05.85,Default,,0000,0000,0000,,juste le nécessaire : un peu de HTML,
Dialogue: 0,0:01:05.85,0:01:10.93,Default,,0000,0000,0000,,le bouton d'installation et la bibliothèque Require.js
Dialogue: 0,0:01:10.93,0:01:14.37,Default,,0000,0000,0000,,Si vous ne connaissez pas Require.js, allez faire un tour sur RequireJS.org.
Dialogue: 0,0:01:14.37,0:01:18.52,Default,,0000,0000,0000,,C'est un système de gestion de modules en JavaScript.
Dialogue: 0,0:01:18.52,0:01:22.66,Default,,0000,0000,0000,,Le modèle contient également un fichier manifest.webapp pré-renseigné
Dialogue: 0,0:01:22.66,0:01:25.69,Default,,0000,0000,0000,,et qu'il vous suffit de compléter
Dialogue: 0,0:01:25.69,0:01:28.78,Default,,0000,0000,0000,,Ces fichiers sont dans le dossier www.
Dialogue: 0,0:01:28.78,0:01:32.10,Default,,0000,0000,0000,,En retournant à la racine du projet, vous verrez d'autres dossiers et fichiers.
Dialogue: 0,0:01:32.10,0:01:36.22,Default,,0000,0000,0000,,Les dossiers node_modules et tools contiennent essentiellement des fichiers pour Volo_
Dialogue: 0,0:01:36.22,0:01:38.80,Default,,0000,0000,0000,,Tous vos fichiers seront dans www,
Dialogue: 0,0:01:38.80,0:01:41.86,Default,,0000,0000,0000,,les autres fichiers ne sont pas directement utiles.
Dialogue: 0,0:01:41.86,0:01:44.63,Default,,0000,0000,0000,,La plupart du temps vous travaillerez dans www.
Dialogue: 0,0:01:44.63,0:01:49.100,Default,,0000,0000,0000,,Une autre chose à savoir est que le modèle embarque Volo, que je vais vous montrer
Dialogue: 0,0:01:49.100,0:01:52.80,Default,,0000,0000,0000,,Volo est un outil de gestion de projets Web.
Dialogue: 0,0:01:52.80,0:01:54.15,Default,,0000,0000,0000,,Il est écrit en node.js.
Dialogue: 0,0:01:54.15,0:01:57.17,Default,,0000,0000,0000,,Si vous n'avez pas node vous allez devoir l'installer, mais c'est simple.
Dialogue: 0,0:01:57.17,0:02:02.79,Default,,0000,0000,0000,,Il suffit d'aller sur nodejs.org, cliquer sur Install et récupérer l'exécutable. Une fois que Node est installé,
Dialogue: 0,0:02:02.79,0:02:08.37,Default,,0000,0000,0000,,il suffit de taper "npm install -g volo".
Dialogue: 0,0:02:08.37,0:02:12.58,Default,,0000,0000,0000,,Cela va installer volo globalement.
Dialogue: 0,0:02:12.58,0:02:14.40,Default,,0000,0000,0000,,Voici quelques commandes Volo dont vous pourriez avoir besoin :
Dialogue: 0,0:02:14.40,0:02:15.94,Default,,0000,0000,0000,,volo create est l'une delle.
Dialogue: 0,0:02:15.94,0:02:18.15,Default,,0000,0000,0000,,Elle prend en paramètres le nom de votre application
Dialogue: 0,0:02:18.15,0:02:27.47,Default,,0000,0000,0000,,et une référence Github ou l'URL d'un modèle comme le brouillon d'application.
Dialogue: 0,0:02:27.47,0:02:29.51,Default,,0000,0000,0000,,et crée l'arborescence d'une application à partir de ce modèle.
Dialogue: 0,0:02:29.51,0:02:33.82,Default,,0000,0000,0000,,C'est une méthode rapide pour créer des applications basées sur les modèles Mortar.
Dialogue: 0,0:02:33.82,0:02:39.24,Default,,0000,0000,0000,,Voilà, à présent nous pouvons faire un cd dans le dossier de l'application
Dialogue: 0,0:02:39.24,0:02:42.15,Default,,0000,0000,0000,,Une autre commande utile est volo serve
Dialogue: 0,0:02:42.15,0:02:44.34,Default,,0000,0000,0000,,Elle lance un serveur local
Dialogue: 0,0:02:44.34,0:02:51.28,Default,,0000,0000,0000,,qui vous permet de voir votre application dans un navigateur
Dialogue: 0,0:02:51.28,0:02:56.18,Default,,0000,0000,0000,,volo add ajoute des dépendances JavaScript.
Dialogue: 0,0:02:56.18,0:03:04.26,Default,,0000,0000,0000,,Par exemple pour utiliser Zepto tapez volo add zepto
Dialogue: 0,0:03:04.26,0:03:07.32,Default,,0000,0000,0000,,En allant dans le dossier js/lib vous y trouverez zepto.
Dialogue: 0,0:03:10.13,0:03:14.66,Default,,0000,0000,0000,,On peut à présent ajouter un require('zepto') au fichier app.js
Dialogue: 0,0:03:14.66,0:03:25.77,Default,,0000,0000,0000,,En fait il y est déjà, assurons-nous juste qu'il trouve Zepto
Dialogue: 0,0:03:26.97,0:03:28.82,Default,,0000,0000,0000,,Et voilà
Dialogue: 0,0:03:28.82,0:03:31.60,Default,,0000,0000,0000,,Vous remarquerez qu'on inclut Zepto avec la fonction require
Dialogue: 0,0:03:31.60,0:03:33.60,Default,,0000,0000,0000,,parce que nous utilisons require.js.
Dialogue: 0,0:03:33.60,0:03:37.73,Default,,0000,0000,0000,,De ce fait, toutes les bibliothèques doivent être définies comme des modules
Dialogue: 0,0:03:37.73,0:03:40.03,Default,,0000,0000,0000,,On utilise pour cela la fonction define().
Dialogue: 0,0:03:40.03,0:03:43.80,Default,,0000,0000,0000,,Mais que se passe-t-il si vous voulez utiliser une bibliothèque tierce qui n'est pas un module ?
Dialogue: 0,0:03:43.80,0:03:48.07,Default,,0000,0000,0000,,volo add peut encapsuler automatiquement une bibliothèque.
Dialogue: 0,0:03:48.07,0:03:54.55,Default,,0000,0000,0000,,Par exemple, si vous voulez inclure cette bibliothèque de gestion de fontes, vous pouvez passer son URL à volo add.
Dialogue: 0,0:03:54.55,0:03:59.65,Default,,0000,0000,0000,,Volo détecte qu'elle n'utilise pas de modules et vous demande quelles sont ses dépendances,
Dialogue: 0,0:03:59.65,0:04:02.83,Default,,0000,0000,0000,,et quelle variable globale vous voulez exposer.
Dialogue: 0,0:04:02.83,0:04:11.50,Default,,0000,0000,0000,,en fait, il modifie un objet jQuery pour qu'il n'exporte rien, mais on peut ignorer ça.
Dialogue: 0,0:04:11.50,0:04:13.82,Default,,0000,0000,0000,,À présent je peux utiliser la bibliothèque jQuery Flot avec require.
Dialogue: 0,0:04:13.82,0:04:18.26,Default,,0000,0000,0000,,
Dialogue: 0,0:04:18.26,0:04:24.76,Default,,0000,0000,0000,,Notez que je ne me soucie pas de la valeur de retour
Dialogue: 0,0:04:24.76,0:04:28.08,Default,,0000,0000,0000,,Il y a deux commandes volo à essayer absolument.
Dialogue: 0,0:04:28.08,0:04:30.75,Default,,0000,0000,0000,,volo build crée une version optimisée de votre application.
Dialogue: 0,0:04:30.75,0:04:34.97,Default,,0000,0000,0000,,Il concatène et compresse tous les fichiers CSS et JavaScript
Dialogue: 0,0:04:36.60,0:04:40.59,Default,,0000,0000,0000,,et les place dans le dossier www-build.
Dialogue: 0,0:04:40.59,0:04:44.04,Default,,0000,0000,0000,,Tapez ensuite volo ghdeploy
Dialogue: 0,0:04:44.04,0:04:47.48,Default,,0000,0000,0000,,La première fois, il vous demande le nom du dépôt où déployer.
Dialogue: 0,0:04:48.90,0:04:51.75,Default,,0000,0000,0000,,S'il n'existe pas,
Dialogue: 0,0:04:51.75,0:04:54.63,Default,,0000,0000,0000,,il va le créer et déployer l'application sur Github Pages.
Dialogue: 0,0:04:54.63,0:04:59.06,Default,,0000,0000,0000,,
Dialogue: 0,0:04:59.06,0:05:07.06,Default,,0000,0000,0000,,C'est tout, je peux aller sur mon appli sur Github et elle fonctionne !
Dialogue: 0,0:05:07.06,0:05:10.88,Default,,0000,0000,0000,,Notez l'URL où c'est hébergée sur Github.
Dialogue: 0,0:05:10.88,0:05:13.83,Default,,0000,0000,0000,,En 10 secondes, j'ai pu déployer mon application.
Dialogue: 0,0:05:13.83,0:05:16.16,Default,,0000,0000,0000,,Cela fonctionne que le dépôt existe ou pas,
Dialogue: 0,0:05:16.16,0:05:20.34,Default,,0000,0000,0000,,puis ça pousse l'application dans la branche gh-pages.
Dialogue: 0,0:05:20.34,0:05:22.99,Default,,0000,0000,0000,,Voilà, c'est tout pour Volo
Dialogue: 0,0:05:22.99,0:05:25.31,Default,,0000,0000,0000,,Il y a également un modèle de jeu.
Dialogue: 0,0:05:25.31,0:05:29.49,Default,,0000,0000,0000,,Si vous y jetez un œil, vous verrez qu'il contient un jeu très simple
Dialogue: 0,0:05:29.49,0:05:32.08,Default,,0000,0000,0000,,qui vous permet de contrôler une boîte avec les touches fléchées.
Dialogue: 0,0:05:32.08,0:05:34.90,Default,,0000,0000,0000,,C'est encore très basique, mais si vous regardez le code,
Dialogue: 0,0:05:34.90,0:05:41.68,Default,,0000,0000,0000,,il contient une boucle de jeu complète, et une très utile bibliothèque de gestion des entrées.
Dialogue: 0,0:05:41.68,0:05:46.18,Default,,0000,0000,0000,,Ce qui aide beaucoup.
Dialogue: 0,0:05:46.18,0:05:51.37,Default,,0000,0000,0000,,Il y a également une fonction de rendu et une fonction principale qui contient la boucle principale du jeu.
Dialogue: 0,0:05:58.31,0:06:01.40,Default,,0000,0000,0000,,Ce modèle aide à créer un jeu basique.
Dialogue: 0,0:06:01.40,0:06:03.78,Default,,0000,0000,0000,,Les 2 derniers modèles permettent de créer des listes et des vues par onglets.
Dialogue: 0,0:06:03.78,0:06:09.08,Default,,0000,0000,0000,,Ils contiennent la même chose que le modèle App Stub,
Dialogue: 0,0:06:09.08,0:06:10.95,Default,,0000,0000,0000,,plus une bibliothèque avec des composants d'interface
Dialogue: 0,0:06:10.95,0:06:16.52,Default,,0000,0000,0000,,Voici le modèle liste détaillée.
Dialogue: 0,0:06:16.59,0:06:19.32,Default,,0000,0000,0000,,C'est ce que vous voyez lorsque vous l'installez. C'est une application fonctionnelle avec une liste et des vues détaillées.
Dialogue: 0,0:06:19.32,0:06:22.02,Default,,0000,0000,0000,,Vous avez une liste d'items, sur lesquels vous pouvez cliquer pour en voir le détail.
Dialogue: 0,0:06:27.68,0:06:30.23,Default,,0000,0000,0000,,ous pouvez les éditer,
Dialogue: 0,0:06:30.23,0:06:31.98,Default,,0000,0000,0000,,vos modifications sont prises en compte,
Dialogue: 0,0:06:31.98,0:06:35.09,Default,,0000,0000,0000,,et la liste rafraichie.
Dialogue: 0,0:06:45.95,0:06:47.87,Default,,0000,0000,0000,,Vous pouvez également ajouter de nouveaux items
Dialogue: 0,0:06:47.87,0:06:48.75,Default,,0000,0000,0000,,Et voilà !
Dialogue: 0,0:06:48.75,0:06:55.18,Default,,0000,0000,0000,,Vous trouverez plus de détails sur la bibliothèque d'interface
Dialogue: 0,0:06:55.18,0:06:59.06,Default,,0000,0000,0000,,dans le projet Mortar Layouts, dont le lien est dans le fichier README.
Dialogue: 0,0:06:59.06,0:07:04.07,Default,,0000,0000,0000,,Il implémente cette interface utilisateur
Dialogue: 0,0:07:04.07,0:07:06.63,Default,,0000,0000,0000,,et décrit comment l'utiliser et la modifier.
Dialogue: 0,0:07:06.63,0:07:09.35,Default,,0000,0000,0000,,Je vais vous montrer comment l'écran d'affichage détaillé l'utilise.
Dialogue: 0,0:07:09.35,0:07:12.48,Default,,0000,0000,0000,,Voici le fichier index.html.
Dialogue: 0,0:07:12.48,0:07:18.90,Default,,0000,0000,0000,,Il y a deux balises spécifiques, x-view et x-listview.
Dialogue: 0,0:07:18.90,0:07:24.49,Default,,0000,0000,0000,,x-listview implémente une structure listview, qui implémente un élément avec un en-tête et un pied de page,
Dialogue: 0,0:07:24.49,0:07:28.50,Default,,0000,0000,0000,,et vous pouvez mélanger ces vues, en mettre une à l'intérieur de l'autre.
Dialogue: 0,0:07:28.50,0:07:35.80,Default,,0000,0000,0000,,Il y a également des attributs spécifiques, comme data-view sur un bouton,
Dialogue: 0,0:07:35.81,0:07:40.79,Default,,0000,0000,0000,,qui déclenche l'affichage d'une vue lorsque le bouton est pressé. Sa valeur est un sélecteur CSS.
Dialogue: 0,0:07:40.79,0:07:43.67,Default,,0000,0000,0000,,Vous trouverez plus d'informations dans le dépôt de Mortar Layouts.
Dialogue: 0,0:07:43.67,0:07:46.61,Default,,0000,0000,0000,,L'autre modèle est la vue par onglets,
Dialogue: 0,0:07:46.61,0:07:50.99,Default,,0000,0000,0000,,qui est très similaire à la vue par liste, seul le HTML change un peu.
Dialogue: 0,0:07:50.99,0:07:54.04,Default,,0000,0000,0000,,Il comporte une vue de liste comme le précédent,
Dialogue: 0,0:07:54.04,0:07:58.10,Default,,0000,0000,0000,,mais elle est imbriquée dans la vue principale, qui comporte plusieurs sections,
Dialogue: 0,0:07:58.19,0:08:03.59,Default,,0000,0000,0000,,pour simuler des onglets. Donc, si vous entrez là et consultez cet item,
Dialogue: 0,0:08:03.59,0:08:04.98,Default,,0000,0000,0000,,puis changez de section,
Dialogue: 0,0:08:04.98,0:08:10.91,Default,,0000,0000,0000,,vous remarquerez qu'il mémorise où j'étais et que je peux y revenir.
Dialogue: 0,0:08:11.31,0:08:14.20,Default,,0000,0000,0000,,Tout cela est inclus dans la bibliothèque Mortar Layouts.
Dialogue: 0,0:08:15.22,0:08:17.30,Default,,0000,0000,0000,,Voilà, si vous avez des problèmes,
Dialogue: 0,0:08:17.30,0:08:19.16,Default,,0000,0000,0000,,n'hésitez pas àcréer des tickets sur Github.
Dialogue: 0,0:08:19.56,0:08:21.00,Default,,0000,0000,0000,,Merci de votre attention !