{"id":355,"date":"2020-11-01T17:12:37","date_gmt":"2020-11-01T16:12:37","guid":{"rendered":"https:\/\/cours.artecom.studio\/nepduweb\/?p=355"},"modified":"2023-09-12T12:23:15","modified_gmt":"2023-09-12T10:23:15","slug":"20201101-si-on-na-ni-mac-ni-pc","status":"publish","type":"post","link":"https:\/\/cours.artecom.studio\/nepduweb\/2020\/11\/01\/20201101-si-on-na-ni-mac-ni-pc\/","title":{"rendered":"Si on n&rsquo;a ni Mac ni PC"},"content":{"rendered":"\n<p>Voici un long article particuli\u00e8rement destin\u00e9 \u00e0 celles qui ont suivi le cours de mardi dernier avec un iPad ou un ChromeBook. En mettant ensemble tous les \u00e9l\u00e9ments qui me paraissaient int\u00e9ressants pour envisager le probl\u00e8me pos\u00e9 par ces appareils, j&rsquo;ai fini par \u00e9crire un article entier. Toutefois, vous pouvez aller directement \u00e0 la partie <strong><em>Il y a une app pour \u00e7a<\/em><\/strong> si vous voulez configurer votre iPad ou votre ChromeBook pour pouvoir suivre les cours plus \u00e0 l&rsquo;aise la semaine prochaine. Dans ce cas, cliquez directement sur cette partie dans la table des mati\u00e8res ci-dessous :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#toc_0\">Si on n&rsquo;a ni Mac ni PC<\/a> <ul><li><a href=\"#toc_1\">Communication et outils informatique : Mac et PC de rigueur<\/a><\/li><li><a href=\"#toc_2\">D\u00e9veloppement web et outils libres ou open source<\/a><\/li><li><a href=\"#toc_3\">J\u2019ai un iPad, un ChromeBook, comment faire ?<\/a> <ul><li><a href=\"#toc_4\">Un clavier, sinon rien<\/a><\/li><li><a href=\"#toc_5\">Il y a une app pour \u00e7a<\/a> <ul><li><a href=\"#toc_6\">HTML et CSS sur iOS et ChromeOS<\/a><\/li><li><a href=\"#toc_7\">FTP sur iOS et ChromeOS<\/a> <\/li><\/ul><\/li><li><a href=\"#toc_8\">Les <em>webapps<\/em> \u00e0 la rescousse<\/a> <ul><li><a href=\"#toc_9\">HTML et CSS <em>dans le nuage<\/em><\/a> <ul><li><a href=\"#toc_10\">Glitch<\/a><\/li><li><a href=\"#toc_11\">JSBin<\/a><\/li><li><a href=\"#toc_12\">CodePen<\/a> <\/li><\/ul><\/li><li><a href=\"#toc_13\">JSitor<\/a><\/li><li><a href=\"#toc_14\">FTP en ligne<\/a>   <\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#toc_15\">Et voil\u00e0 !<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc_1\">Communication et outils informatique : Mac et PC de rigueur<\/h2>\n\n\n\n<p>A la suite de notre premier cours, plusieurs d\u2019entre vous se sont trouv\u00e9\u00b7es en difficult\u00e9 pour suivre les proc\u00e9dures qui \u00e9taient propos\u00e9es\u2026 parce qu\u2019ils\u00b7elles n\u2019avaient pas de Mac ni de PC sous Windows (ou m\u00eame \u00e0 la rigueur Linux) pour travailler.<\/p>\n\n\n\n<p>Bon, c\u2019est assez ennuyeux, quand m\u00eame. D\u00e9j\u00e0, il faut vous dire que travailler en communication en n\u2019ayant ni Mac ni PC Windows, c\u2019est un peu comme aller \u00e0 un cours de dessin sans gomme ni crayon\u2026 C\u2019est manquer des outils essentiels pour les t\u00e2ches \u00e0 produire, sachant qu\u2019aujourd\u2019hui produire en com = utiliser un ordinateur, dans 99% des cas. De plus, beaucoup de travaux font appel \u00e0 des logiciels sp\u00e9cialis\u00e9s : graphisme, montage, d\u00e9veloppement web.<\/p>\n\n\n\n<p>On a pr\u00e9vu, depuis le d\u00e9but du d\u00e9partement, une salle informatique pour nos travaux en communication. Ce qu\u2019on n\u2019a pas eu le temps de pr\u00e9voir, c\u2019est le reconfinement. On n\u2019a m\u00eame pas le temps d\u2019acc\u00e9der aux quelques ordinateurs portables du d\u00e9partement avant la fermeture de l\u2019universit\u00e9\u2026<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc_2\">D\u00e9veloppement web et outils libres ou <em>open source<\/em><\/h2>\n\n\n\n<p>Pour ce cours, j&rsquo;ai minutieusement choisi des outils libres ou open source, ce qui est assez facile dans le d\u00e9veloppement web, il y a beaucoup de choix. L\u2019avantage des outils libres c\u2019est\u2026 qu\u2019ils sont libres \ud83d\ude09 C&rsquo;est-\u00e0-dire qu\u2019ils n\u2019encapsulent pas nos donn\u00e9es dans un format propri\u00e9taire qu\u2019eux seuls peuvent ouvrir. Et \u00e7a veut dire aussi que des d\u00e9veloppeurs peuvent v\u00e9rifier \u00e0 tout moment ce que font ces logiciels avec nos donn\u00e9es. <strong>Aujourd\u2019hui, c&rsquo;est un enjeu important de l\u2019avenir du web, alors que notre vie priv\u00e9e et la libert\u00e9 de circulation et d\u2019acc\u00e8s \u00e0 nos donn\u00e9es est de plus en plus menac\u00e9e par l\u2019h\u00e9g\u00e9monie des grandes plateformes du web.<\/strong><\/p>\n\n\n\n<p>Dans le d\u00e9veloppement web, il y a un choix pl\u00e9thorique d\u2019outils libres. Normal, ce sont des d\u00e9veloppeurs qui les utilisent, et nombreux d\u2019entre eux ont essay\u00e9 de se fabriquer l\u2019outil qui leur convenait le mieux\u2026 et l\u2019ont partag\u00e9 avec la communaut\u00e9.<\/p>\n\n\n\n<p>Toutefois, ce choix se restreint d\u00e8s lors qu\u2019on utilise des plateformes non pens\u00e9es au d\u00e9part pour le d\u00e9veloppement. Sur Windows et macOS, il y a beaucoup de choix de logiciels payants, et moins de choix de logiciels libres (<em>free<\/em>, en anglais, qui veut dire \u00e0 la fois <em>libre<\/em> et <em>gratuit<\/em>, ce qui entraine quelques confusions, m\u00eame si la plupart des logiciels sont les deux \u00e0 la fois). Sur Linux, il y a majoritairement des logiciels libres (Linux \u00e9tant d\u00e9j\u00e0, lui-m\u00eame, un syst\u00e8me d\u2019exploitation libre).<\/p>\n\n\n\n<p>\u00c7a se complique sur ChromeOS, sur Android et sur iOS : ces trois plateformes ont \u00e9t\u00e9 con\u00e7ues avec l\u2019id\u00e9e de la consultation de document en t\u00eate, plut\u00f4t que la production de document. Leurs interfaces m\u00eame sont pens\u00e9es pour la consultation digitale (en fran\u00e7ais, \u00e7a veut dire avec les doigts). Les ordinateurs, tablettes et t\u00e9l\u00e9phones qui utilisent ces syst\u00e8mes d\u2019exploitation sont en g\u00e9n\u00e9ral compatibles avec de la bureautique l\u00e9g\u00e8re et en ligne (de pr\u00e9f\u00e9rence avec les outils logiciels de la marque, iOS avec sa suite bureautique, Android et surtout Chrome OS avec la suite logicielle de Google). les d\u00e9veloppeurs ayant beaucoup moins de besoin pour ces plateformes, ils ont cr\u00e9\u00e9 beaucoup moins d\u2019outils.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc_3\">J\u2019ai un iPad, un ChromeBook, comment faire ?<\/h2>\n\n\n\n<p>Tout n\u2019est pas perdu, mais ce sera plus difficile. D\u2019abord, il faut avoir \u00e0 l\u2019esprit une chose : d\u00e8s lors qu\u2019on sort des sentiers battus, en informatique comme ailleurs, il faut \u00eatre plus autonome que la plupart des gens.<\/p>\n\n\n\n<p>Si vous utilisez Linux, il faut vous attendre \u00e0 ce que la plupart des gens ne puissent pas vous aider si vous avez un probl\u00e8me (beaucoup ne savent pas ce que c\u2019est\u2026).<\/p>\n\n\n\n<p>Si vous utilisez un iPad, pens\u00e9 pour la lecture, la consultation de magazines, le visionnage de vid\u00e9os, il y a de fortes chances que tr\u00e8s peu de gens parmi les utilisateurs d\u2019iPad que vous connaissez puisse vous aider \u00e0\u2026 d\u00e9velopper des sites web sur iPad !<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"toc_4\">Un clavier, sinon rien<\/h3>\n\n\n\n<p>Bon, faut pas se mentir\u2026 pour \u00e9crire du code, il <strong>faut<\/strong> un clavier&nbsp;; la majeure partie des am\u00e9liorations dans l\u2019\u00e9criture sont des raccourcis-clavier, et il faut sans cesse taper des caract\u00e8res inhabituels (<code>[<\/code> et <code>]<\/code>, <code>{<\/code> et <code>}<\/code>, <code>&lt;<\/code> et <code>&gt;<\/code>, <code>\/<\/code> et <code>\\<\/code>). Inutile de dire que c\u2019est un peu compliqu\u00e9 quand ils se trouvent dans le troisi\u00e8me clavier de la tablette\u2026<\/p>\n\n\n\n<p>Pourtant, les \u00e9diteurs de texte et de code sur tablette essaient de palier ce manque en proposant une ligne suppl\u00e9mentaire sur leur clavier, dans laquelle on retrouve la majeure partie de ces caract\u00e8res.<br>Mais m\u00eame pour un d\u00e9veloppeur chevronn\u00e9, \u00e7a ne peut \u00eatre qu\u2019un outil d\u2019appoint.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft is-resized\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2020\/11\/le-clavier-de-GoCoEdti.jpg?resize=289%2C120&#038;ssl=1\" alt=\"le-clavier-de-GoCoEdti\" width=\"289\" height=\"120\"\/><figcaption>le-clavier-de-GoCoEdit<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright is-resized\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2020\/11\/le-clavier-de-Textastic.jpg?resize=300%2C131&#038;ssl=1\" alt=\"le-clavier-de-Textastic\" width=\"300\" height=\"131\"\/><figcaption>le-clavier-de-Textastic<\/figcaption><\/figure><\/div>\n\n\n\n<p>En revanche, les tablettes ont aujourd\u2019hui la capacit\u00e9 de se connecter en bluetooth \u00e0 n\u2019importe quel clavier (moyennant, parfois, certains arrangements); et plusieurs marques de claviers ont compris l\u2019int\u00e9r\u00eat de permettre la connexion facile avec plusieurs appareils. Aussi, si vous avez chez vous un clavier bluetooth qui tra\u00eene, il y a des chances qu\u2019il soit compatible avec votre tablette, et il vaut mieux que vous l\u2019utilisiez en cours.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"toc_5\">Il y a une app pour \u00e7a<\/h3>\n\n\n\n<p>Il y a quelques ann\u00e9es (enfin quelques\u2026 je vous parle d&rsquo;une \u00e9poque o\u00f9 vous alliez au primaire, l\u00e0), Apple avait sorti une publicit\u00e9 pour vanter la toute nouvelle boutique d&rsquo;applications de l\u2019iPhone (3G, une autre \u00e9poque je vous dis !), dont le slogan \u00e9tait: <em>il y a une app pour \u00e7a.<\/em> Et c\u2019est vrai, que ce soit sur iOS ou sur Android, qu\u2019il y a tr\u00e8s souvent une app qui fait le job alors qu\u2019on pensait \u00eatre coinc\u00e9 avec son appareil.<br><a href=\"https:\/\/youtu.be\/XoPZnz9vxwk\">koder<\/a><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video-container\"><iframe title=\"Pub iPhone 3G &quot;Applications pour tout&quot;\" width=\"740\" height=\"416\" src=\"https:\/\/www.youtube.com\/embed\/XoPZnz9vxwk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"toc_6\">HTML et CSS sur iOS et ChromeOS<\/h4>\n\n\n\n<p>Pour le d\u00e9veloppement Web, sur iOS, il y a du choix, et contrairement \u00e0 ce qu\u2019on aurait pu croire, il y a m\u00eame du choix en gratuit :<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large is-resized\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2020\/11\/koder_logo.jpg?resize=61%2C61&#038;ssl=1\" alt=\"\" class=\"wp-image-362\" width=\"61\" height=\"61\" srcset=\"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2020\/11\/koder_logo.jpg?w=233&amp;ssl=1 233w, https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2020\/11\/koder_logo.jpg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2020\/11\/koder_logo.jpg?resize=200%2C200&amp;ssl=1 200w\" sizes=\"(max-width: 61px) 100vw, 61px\" \/><\/figure><\/div>\n\n\n\n<p><a href=\"https:\/\/koderapp.com\/\">Koder<\/a> est un \u00e9diteur pour iPhone et iPad. L&rsquo;application vous permettra de faire pratiquement tout ce qu&rsquo;on fait en cours (lire et \u00e9diter un fichier en local ou en ligne &#8211; notamment sur Dropbox et en FTP), moyennant un peu d&rsquo;adaptation.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft is-resized\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2020\/11\/kodex_logo.jpg?resize=57%2C57&#038;ssl=1\" alt=\"kodex_logo\" width=\"57\" height=\"57\"\/><figcaption>kodex_logo<\/figcaption><\/figure><\/div>\n\n\n\n<p><a href=\"https:\/\/kodex.app\/\">Kodex<\/a>, lui aussi gratuit (mais vous pouvez r\u00e9compenser son auteur avec un achat in-app de 5,49\u20ac), en anglais et sans gestion du FTP ;<br>\u2013 <a href=\"https:\/\/apps.apple.com\/app\/code-master-source-code-editor\/id502404926\">Code Master<\/a> est lui aussi gratuit, sans FTP et en anglais), mais il semble un peu costaud et touffu pour notre usage.<\/p>\n\n\n\n<p>Sur ChromeOS, il faut se tourner vers deux gros \u00e9diteurs, un peu plus touffus \u00e0 prendre en main que Brackets, et multiplateformes :<br>\u2013 <a href=\"https:\/\/code.visualstudio.com\/\">Visual Code Studio<\/a>, l\u2019\u00e9diteur open source de Microsoft, <br>\u2013 <a href=\"https:\/\/atom.io\/\">Atom<\/a>, l\u2019\u00e9diteur open source de l\u2019\u00e9quipe de GitHub, la plateforme de partage de code la plus connue du Web.<\/p>\n\n\n\n<p>Mais ce sont des \u00e9diteurs un peu lourds \u00e0 g\u00e9rer pour notre niveau. Il existe en revanche un \u00e9diteur l\u00e9ger et semble-il id\u00e9al pour qui voudrait suivre ce cours sur un ChromeBook: <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/text\/mmfbcljfglbokpmkimbfghdkjmjhdgbg?utm_source=chrome-app-launcher\">Text.app<\/a>. <strong>Si j\u2019en crois <a href=\"https:\/\/mychromebook.fr\/un-editeur-de-texte-simple-et-leger-pour-chromebook\/#A_qui_peut_etre_utile_TEXT_app\">cette description<\/a>, c\u2019est le candidat id\u00e9al pour vos besoins.<\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"toc_7\">FTP sur iOS et ChromeOS<\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright is-resized\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2020\/11\/ftp_manager_connexion-1.jpg?resize=235%2C314&#038;ssl=1\" alt=\"ftp_manager_connexion\" width=\"235\" height=\"314\"\/><figcaption>ftp_manager_connexion<\/figcaption><\/figure><\/div>\n\n\n\n<p>Sur iOS, vous avez plusieurs solutions pour envoyer vos fichiers en FTP. <br>La premi\u00e8re est d&rsquo;utiliser un \u00e9diteur qui aura son propre logiciel de FTP int\u00e9gr\u00e9: c&rsquo;est le cas de Koder, vu plus haut.<\/p>\n\n\n\n<p>La seconde est d&rsquo;installer une app de FTP, comme <br><a href=\"https:\/\/www.skyjos.com\/ftpmanager\/index.html\">FTPManager<\/a>, qui est fonctionnelle dans sa version gratuite et qui dispose d&rsquo;une version pro payante\u2026 mais facultative pour notre usage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"toc_8\">Les <em>webapps<\/em> \u00e0 la rescousse<\/h3>\n\n\n\n<p>Ce qui est g\u00e9nial avec le web, c&rsquo;est qu\u2019il y a presque toujours une solution\u2026 web a un probl\u00e8me de d\u00e9veloppement web. Puisque les syst\u00e8mes d\u2019exploitation ont leurs restrictions propres, pourquoi ne pas utiliser un syst\u00e8me plus universel ? Le Web ! Jusqu\u2019\u00e0 pr\u00e9sent, et on l\u2019esp\u00e8re encore pour longtemps, le web est le m\u00eame pour toutes les machines, quel que soit leur syst\u00e8me d\u2019exploitation. <!-- Et, de plus en plus, le web devient un ordinateur g\u00e9ant, en plus d'\u00eatre une biblioth\u00e8que g\u00e9ante. En effet, on n\u2019est plus \u00e0 l\u2019\u00e8re  du web de documents qu\u2019\u00e9tait le web 1.0, on est \u00e0 l\u2019heure du web des applications, d\u2019abord caract\u00e9ris\u00e9 par l\u2019av\u00e8nement des plateformes de r\u00e9seautage social, auxquelles s\u2019ajoutent aujourd\u2019hui le mod\u00e8le as a service, qu\u2019il s\u2019agisse de logiciel (SaaS, pour [Software as a Service](https:\/\/fr.wikipedia.org\/wiki\/Software_as_a_service)), ou de plateforme ([PaaS](https:\/\/fr.wikipedia.org\/wiki\/Platform_as_a_service)), c'est-\u00e0-dire d\u2019une gestion des applications, des plateformes, des donn\u00e9es dans le cloud, depuis des serveurs distants. --> Et nous sommes \u00e0 l&rsquo;\u00e8re du <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Cloud_computing\">Cloud Computing<\/a><sup id=\"fnref1\"><a href=\"#fn1\" rel=\"footnote\">1<\/a><\/sup>, ce qui va bien nous arranger, puisque que dans notre cas, il va \u00eatre possible d\u2019avoir des applications en ligne qui permettent d\u2019\u00e9crire du code HTML et CSS, voire de faire du FTP, de mani\u00e8re \u00e0 remplacer celles que nous ne pouvons pas installer sur nos ordinateurs pour une raison ou pour une autre.<\/p>\n\n\n\n<p><strong>Avec toutefois un inconv\u00e9nient important: la plupart de ces applications fonctionnant dans le nuage, il faut\u2026 une bonne connexion internet pour qu\u2019elles fonctionnent.<\/strong><sup id=\"fnref2\"><a href=\"#fn2\" rel=\"footnote\">2<\/a><\/sup><\/p>\n\n\n\n<p>Le principe de ces applications en ligne est simple : vous pouvez les utiliser pour cr\u00e9er vos pages web, et elles sont gratuites tant que votre code reste public: tout ce que vous faites est accessible \u00e0 la communaut\u00e9 des utilisateurs. Les fonctionnalit\u00e9s de privatisation sont payantes. Pour ce qui nous concerne, aucun probl\u00e8me : je ne pense pas qu\u2019on invente un code r\u00e9volutionnaire d&rsquo;ici \u00e0 la fin du semestre ! \ud83d\ude09<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"toc_9\">HTML et CSS <em>dans le nuage<\/em><\/h4>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"toc_10\">Glitch<\/h5>\n\n\n\n<p>La seule, parmi toutes celles que j&rsquo;ai test\u00e9es, qui permette dans sa version gratuite de g\u00e9rer plusieurs pages avec une m\u00eame feuille de style, c&rsquo;est <a href=\"https:\/\/glitch.com\/\">Glitch<\/a>.<\/p>\n\n\n\n<p>Inconv\u00e9nient: pour utiliser Glitch, il faut cr\u00e9er un compte. Mais le compte ouvre deux possibilit\u00e9s int\u00e9ressantes et importantes pour nous:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>vous pouvez sauvegarder vos diff\u00e9rentes pages HTML sur Glitch, et ainsi avoir une copie en ligne de votre projet<\/li><li>Glitch cr\u00e9\u00e9e une page web coordonn\u00e9e \u00e0 votre projet, et permet de l&rsquo;afficher\n<ul>\n<li>soit en troisi\u00e8me colonne de la fen\u00eatre qui affiche d\u00e9j\u00e0 le code HTML et le code CSS ; pratique, vous voyez les modifications de votre code au fur et \u00e0 mesure ;<\/li>\n<li>soit sur un autre onglet de votre navigateur : pratique aussi, vous voyez la page telle qu&rsquo;elle s&rsquo;affichera dans votre projet final.<br>Pour voir le r\u00e9sultat des modifications qu&rsquo;on a fait sur son code, il faut cliquer sur le bouton <code>Show<\/code> (avec l&rsquo;ic\u00f4ne de lunettes de soleil); c&rsquo;est l\u00e0 que vous pouvez choisir le mode d&rsquo;affichage.<\/li>\n<\/ul>\n<\/li><\/ol>\n\n\n\n<p>![]()cliquez sur le bouton Show pour pr\u00e9visualiser votre page<\/p>\n\n\n\n<p><strong>Le fait que Glitch permette de travailler sur plusieurs pages HTML le rend favori pour celles et ceux qui, avan\u00e7ant dans le cours, n&rsquo;ont ni Mac, ni PC.<\/strong><\/p>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"toc_11\">JSBin<\/h5>\n\n\n\n<p>Bien que JS Bin n\u2019ait pas fonctionn\u00e9 comme outil pour partager du code, il reste l\u2019\u00e9diteur de code en ligne le plus simple \u00e0 prendre en main.<\/p>\n\n\n\n<p>Allez donc sur le site <a href=\"http:\/\/jsbin.com\">http:\/\/jsbin.com<\/a>, qui est par d\u00e9faut ouvert sur un pad <em>HTML<\/em> et un pad <em>Output<\/em> qui affiche le rendu de votre fichier HTML, c&rsquo;est-\u00e0-dire le r\u00e9sultat qu\u2019il donnera sur un navigateur quand il sera en ligne.<\/p>\n\n\n\n<p>Cliquez sur le bouton <em>CSS<\/em> pour avoir activer le pad <em>CSS<\/em>. Quand vous \u00e9crirez vos premi\u00e8res r\u00e8gles CSS, le r\u00e9sultat s\u2019affichera directement dans le pad <em>Output<\/em>.<\/p>\n\n\n\n<p>N\u2019oubliez pas <br>\u2013 <strong>de sauvegarder r\u00e9guli\u00e8rement votre travail<\/strong> (soit dans <em>Files<\/em> \u00e0 gauche de la barre de menu grise, soit en utilisant le raccourci clavier <kbd>cmd<\/kbd> + <kbd>S<\/kbd> ou <kbd>ctrl<\/kbd> + <kbd>S<\/kbd> (<kbd>cmd<\/kbd> = <kbd>\u2318<\/kbd>) si vous utilisez un clavier mac ;<br>\u2013 <strong>de copier ce travail dans un fichier au format <code>.html<\/code> ou <code>.css<\/code> sur votre disque dur<\/strong> (sans quoi vous aurez du mal \u00e0 le mettre en ligne sur votre espace FTP.<\/p>\n\n\n\n<p>Sinon, ouvrir un compte sur JSBin vous permet de conserver votre code en ligne et de le retrouver \u00e0 chaque reconnexion.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"toc_12\">CodePen<\/h5>\n\n\n\n<p>Mais \u00e0 ouvrir un compte, autant aller sur la Rolls des \u00e9diteurs en ligne, <a href=\"https:\/\/codepen.io\">CodePen<\/a>, qui vous offre un \u00e9diteur \u00e9quivalent \u00e0 Brackets en ligne. De plus, CodePen a une application pour iOS et pour Android (mais je ne suis pas s\u00fbr qu\u2019elle puisse \u00eatre utilis\u00e9e pour Chrome OS). Toujours est-il que CodePen est avant tout un service en ligne, qui remplit toutes les conditions pour notre apprentissage.<br>On y reviendra pour trouver des morceaux de code pour des \u00e9l\u00e9ments un peu compliqu\u00e9, il fonctionnera fr\u00e9quemment comme une biblioth\u00e8que de <em>snippets<\/em> (des bouts de code r\u00e9utilisables).<\/p>\n\n\n\n<p>Vous pouvez masquer le pad Javascript, qui ne nous servira pas. Et vous pouvez reconfigurer et redimensionner les diff\u00e9rents pads.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"toc_13\">JSitor<\/h4>\n\n\n\n<p>Au fil de mes recherches, j&rsquo;ai aussi trouv\u00e9 cette application qui m&rsquo;a l&rsquo;air tr\u00e8s int\u00e9ressante et sans complication : <a href=\"https:\/\/jsitor.com\/\">JSitor<\/a>. Elle cumule l&rsquo;avantage d&rsquo;\u00eatre une webapp et d&rsquo;avoir une application d\u00e9di\u00e9e pour iOS, Android, et ChromeOS (malheureusement, je n&rsquo;ai pas pu tester l&rsquo;existence de cette derni\u00e8re).<\/p>\n\n\n\n<p>Son interface est tr\u00e8s simplifi\u00e9e, ce qui peut \u00eatre un avantage quand on d\u00e9marre.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"toc_14\">FTP en ligne<\/h4>\n\n\n\n<p>Une fois que vous avez \u00e9crit vos pages web et votre feuille de style, n\u2019oubliez pas de les enregistrer sur votre ordinateur (mieux: dans un dossier d\u00e9di\u00e9 dans votre dossier Dropbox).<\/p>\n\n\n\n<p>Une fois enregistr\u00e9s sur votre disque dur, vous pouvez double cliquer sur votre fichier <code>index.html<\/code> et\u2026 \u00d4 miracle : il s\u2019ouvre dans votre navigateur, et vous voyez votre site.<\/p>\n\n\n\n<p>C\u2019est que votre site est maintenant cr\u00e9\u00e9 localement, et votre navigateur n\u2019a besoin de rien de plus pour le lire normalement. <br>Le probl\u00e8me, c\u2019est que votre site <em>n\u2019est pas en ligne<\/em>, sur le web. Seul votre ordinateur peut le lire. <br><strong>C\u2019est la raison pour laquelle on utilise un logiciel de FTP: pour mettre son site sur un serveur qui le rendra disponible en ligne.<\/strong><\/p>\n\n\n\n<p>J\u2019ai rep\u00e9r\u00e9 un logiciel de FTP gratuit en ligne, qui remplacera donc Cyberduck pour celles et ceux qui n&rsquo;ont ni PC Windows (ou Linux), ni Mac : allez sur le site <a href=\"https:\/\/webftp.selfbuild.fr\/\">https:\/\/webftp.selfbuild.fr\/<\/a> et utilisez vos identifiants pour acc\u00e9der \u00e0 votre espace FTP, avec les correspondances suivantes par rapport au fichier Acc\u00e8s FTP qu\u2019il y a sur la dropbox :<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Sur WebFTP<\/th><th>sur le fichier Acc\u00e8s FTP 2020<\/th><\/tr><\/thead><tbody><tr><td>H\u00f4te<\/td><td>serveur<\/td><\/tr><tr><td>utilisateur<\/td><td>nom d\u2019utilisateur<\/td><\/tr><tr><td>&nbsp;Mot de passse<\/td><td>mot de passe<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Cliquez sur <em>connexion<\/em> une fois que vous avez rempli tous les champs. Et voil\u00e0, vous \u00eates connect\u00e9e \u00e0 votre espace FTP.<\/p>\n\n\n\n<p>L\u2019inconv\u00e9nient, c\u2019est qu\u2019il faudra recommencer cette man\u0153uvre \u00e0 chaque fois que vous voulez mettre des fichiers en ligne par FTP, mais l\u2019avantage, c&rsquo;est que vous n&rsquo;avez absolument pas besoin d&rsquo;ouvrir un compte ni de vous abonner \u00e0 n&rsquo;importe quoi.<\/p>\n\n\n\n<p>Une fois connect\u00e9 vous pouvez mettre des fichiers en ligne par glisser-d\u00e9poser.<br>N\u2019oubliez pas, une fois que vous avez mis vos fichiers, de vous d\u00e9connecter de <em>WebFTP<\/em> en cliquant dans la barre bleue \u00e0 droite sur <strong>Fichier<\/strong>, puis en descendant pour cliquer jusqu\u2019\u00e0 <em>d\u00e9connexion<\/em>.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"toc_15\">Et voil\u00e0 !<\/h1>\n\n\n\n<p>Au terme de ce long p\u00e9riple, vous voil\u00e0 capable de vous d\u00e9brouiller pour suivre le cours et avancer votre code, m\u00eame si vous ne disposez que d&rsquo;un navigateur sur iPad ou sur ChromeOS. <br>\u00c0 vous de jouer !<\/p>\n\n\n\n<div class=\"footnotes\"><hr>\n<ol>\n<li id=\"fn1\">\n<p>Ce qui veut dire qu\u2019aujourdhui, on peut avoir un ordinateur qui n&rsquo;est qu\u2019un client pour un serveur sur lequel se trouve les logiciels et les donn\u00e9es. Par exemple, il existe des offres de cloud gaming, comme le fran\u00e7ais <a href=\"https:\/\/shadow.tech\/fr\/\">Shadow<\/a>, qui consiste \u00e0 vous connecter \u00e0 un ordinateur puissant\u2026 en ligne, pour jouer \u00e0 des jeux que votre ordinateur ne serait pas capable de g\u00e9rer.&nbsp;<a href=\"#fnref1\" rev=\"footnote\">\u21a9<\/a><\/p>\n<\/li>\n<li id=\"fn2\">\n<p>Seules quelques-unes d\u2019entre elles se chargent enti\u00e8rement dans le navigateur pour fonctionner ensuite en local, sans connexion \u00e0 internet. Elles sont g\u00e9n\u00e9ralement \u00e9crite en javascript, langage de programmation que sait ex\u00e9cuter un navigateur, ce qui leur permet d\u2019utiliser le moteur javascript du navigateur pour fonctionner.&nbsp;<a href=\"#fnref2\" rev=\"footnote\">\u21a9<\/a><\/p>\n<\/li>\n<\/ol>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Voici un long article particuli\u00e8rement destin\u00e9 \u00e0 celles qui ont suivi le cours de mardi dernier avec un iPad ou un ChromeBook. En mettant ensemble tous les \u00e9l\u00e9ments qui me&#46;&#46;&#46;<\/p>\n","protected":false},"author":2,"featured_media":364,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[45,11,16,3,9,48,15],"tags":[],"class_list":["post-355","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-a-faire","category-a-lire","category-mode-demploi","category-neduweb","category-outils","category-pratique-du-web","category-tutoriel"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2020\/11\/5389745461_1f09f9c740_w.jpg?fit=400%2C266&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/comments?post=355"}],"version-history":[{"count":9,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/355\/revisions"}],"predecessor-version":[{"id":434,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/355\/revisions\/434"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/media\/364"}],"wp:attachment":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/media?parent=355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/categories?post=355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/tags?post=355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}