Jekyll2023-12-29T11:09:30+00:00https://charlesen.github.io/feed.xmlCharles EDOU NZEIngénieur informatique, formateur et blogueur[Livre] Développement d’applications mobiles en Précommande sur Amazon2018-05-01T10:20:47+00:002018-05-01T10:20:47+00:00https://charlesen.github.io/livre-developpement-dapplications-mobiles-en-pre-commande-sur-amazon<p><a href="https://amzn.to/2JtycDN" target="_blank" rel="noopener"><img loading="lazy" class=" size-full wp-image-448 aligncenter" src="https://charlesen.fr/wp-content/uploads/2018/05/cover_1.png" alt="cover_1.png" width="480" height="672" /></a></p>
<p>Je vous parlais dans un <a href="https://charlesen.fr/ebook-gratuit-developpement-dapplications-mobiles-avec-ionic/">autre article</a> de la version gratuite de mon livre disponible à l’adresse <a href="https://ionic.mobiletuto.com">https://ionic.mobiletuto.com</a>, mais j’ai le plaisir de vous annoncer la mise à disposition à la fois d’une version électronique (Kindle) et Papier sur <a href="https://www.amazon.fr/D%C3%A9veloppement-dapplications-mobiles-avec-Ionic-ebook/dp/B07CRKNGCC/ref=sr_1_3?s=books&ie=UTF8&qid=1525169449&sr=1-3&keywords=ionic">Amazon</a> pour ceux qui souhaiteraient me soutenir et avoir le plaisir d’avoir un livre papier dans les mains.</p>
<p>Je sais combien certains sont très « papier », alors n’hésitez pas à précommander ce livre qui est à seulement <strong>24,95€</strong> en version brochée et offrez-lui une bonne place dans votre bibliothèque :-D.</p>
<p style="text-align: center;">
<a href="https://amzn.to/2JtycDN" target="_blank" rel="noopener">Pré-commander le livre sur Amazon</a>
</p>charlesen[eBook Gratuit] Développement d’applications mobiles avec Ionic2018-04-26T07:42:58+00:002018-04-26T07:42:58+00:00https://charlesen.github.io/ebook-gratuit-developpement-dapplications-mobiles-avec-ionic<h3 style="text-align: center;">
<a href="https://legacy.gitbook.com/download/pdf/book/charlesen1/developpez-des-applications-avec-ionic">Télécharger le e-Book</a>
</h3>
<p><a href="https://legacy.gitbook.com/download/pdf/book/charlesen1/developpez-des-applications-avec-ionic"><img loading="lazy" class="aligncenter size-full wp-image-443" src="https://charlesen.fr/wp-content/uploads/2018/04/pdf-icon.png" alt="" width="256" height="256" srcset="https://charlesen.fr/wp-content/uploads/2018/04/pdf-icon.png 256w, https://charlesen.fr/wp-content/uploads/2018/04/pdf-icon-150x150.png 150w" sizes="(max-width: 256px) 100vw, 256px" /></a></p>
<p>Dès les premiers instants du mobile, il n’y avait vraiment qu’une seule façon d’offrir aux utilisateurs la performance et les fonctionnalités qu’ils attendaient : vous deviez utiliser un SDK, c’est à dire un ensemble d’outils logiciels spécifiques à la plateforme que vous souhaitiez cibler. Bien sûr, cela impliquait un certain nombre de contraintes :</p>
<ul>
<li>Construire une version différente pour chaque plate-forme mobile</li>
<li>Gérer plusieurs codes sources</li>
<li>Embaucher et retenir des développeurs natifs hautement spécialisés et coûteux</li>
</ul>
<p>Depuis, beaucoup d’eau a coulé sous les ponts et les demandes de produits adaptés aux mobiles ont augmenté de manière exponentielle.</p>
<p>C’est dans ce contexte de fortes demandes que sont nés des projets comme Ionic qui facilite le développement d’applications mobiles robustes et intuitives.</p>
<p>Au sommaire de cet e-Book :</p>
<ul>
<li><a href="https://ionic.mobiletuto.com/copyright.html">Copyright</a></li>
<li><a href="https://ionic.mobiletuto.com/a-propos-de-lauteur.html">A propos de l’auteur</a></li>
<li><a href="https://ionic.mobiletuto.com/introduction.html">Introduction</a></li>
<li><a href="https://ionic.mobiletuto.com/chap1">Chap 1 – Une brève histoire du mobile</a></li>
<li><a href="https://ionic.mobiletuto.com/chap2">Chap 2 – Cas pratique : DuckCoin, la cryptomonnaie sur mobile</a></li>
<li><a href="https://ionic.mobiletuto.com/chap3">Chap 3 – Installation de Ionic et première prise en main</a></li>
<li><a href="https://ionic.mobiletuto.com/chap4">Chap 4 – Templates et Customisation</a></li>
<li><a href="https://ionic.mobiletuto.com/chap5">Chap 5 – Utilisation des composants Ionic</a></li>
<li><a href="https://ionic.mobiletuto.com/chap6">Chap 6 – Introduction au langage TypeScript, le futur de JavaScript</a></li>
<li><a href="https://ionic.mobiletuto.com/chap7">Chap 7 – Introduction au framework Angular</a></li>
<li><a href="https://ionic.mobiletuto.com/chap8">Chap 8 – Architecture avancée d’une application Ionic : Composants, Directives, Providers, Services, Pipes, Modules, persistance de données et plugins natifs</a></li>
<li><a href="https://ionic.mobiletuto.com/chap9">Chap 9 – Tests et débogages avancés</a></li>
<li><a href="https://ionic.mobiletuto.com/chap10">Chap 10 – Ionic et son écosystème : Cloud, Lab, View et Creator</a></li>
<li><a href="https://ionic.mobiletuto.com/chap11">Chap 11 – Publication sur les stores</a></li>
<li><a href="https://ionic.mobiletuto.com/chap12">Chap 12 – Introduction au PWA avec Stencil et Capacitor</a></li>
</ul>
<p> </p>charlesenTélécharger le e-BookTechnologies mobiles : prédictions pour l’Afrique en 2018 du cabinet Deloitte2018-04-26T07:05:33+00:002018-04-26T07:05:33+00:00https://charlesen.github.io/technologies-mobiles-predictions-pour-lafrique-en-2018-du-cabinet-deloitte<blockquote>
<p>L’avenir est ici.</p>
</blockquote>
<p>Deloitte dévoile pour la 7ème année consécutive les tendances du secteur des Technologies, Médias et Télécommunications Afrique 2018. Cette étude porte sur les évolutions des usages des consommations et du marché TMT africain.</p>
<h3 id="un-usage-excessif-des-smartphones">Un usage excessif des smartphones</h3>
<p>L’émergence des smartphones en Afrique a un effet addictif auprès des 18-35 ans. Plus de 48% des répondants déclarent être dépendants !</p>
<h3 id="un-marché-du-smartphone-en-forte-expansion">Un marché du smartphone en forte expansion</h3>
<p>D’ici 2020, on s’attend à avoir plus de 660 millions d’utilisateurs de smartphones en Afrique – soit un taux de pénétration de près de 55% – et près d’un demi-milliard d’accès internet via smartphone.<!--more--></p>
<p><a href="https://www2.deloitte.com/tg/fr/pages/technologies-medias-et-telecommunications/articles/tmt-predictions-afrique.html" target="_blank" rel="noopener">Lire la suite du rapport…</a></p>charlesenL’avenir est ici.Coût de Fabrication de l’iPhone dans le temps2017-11-22T07:14:35+00:002017-11-22T07:14:35+00:00https://charlesen.github.io/cout-de-fabrication-de-liphone-dans-le-temps<h3 style="text-align: center;">
Cherchez l’erreur…
</h3>
<p style="text-align: center;">
Quand on sait à quel prix ils le vendent
</p>
<p><img loading="lazy" class="alignnone size-full wp-image-399" src="https://charlesen.fr/wp-content/uploads/2017/11/coucc82t_fabrication_iphonex-785x588.png" alt="coucc82t_fabrication_iphonex-785x588" width="785" height="588" srcset="https://charlesen.fr/wp-content/uploads/2017/11/coucc82t_fabrication_iphonex-785x588.png 785w, https://charlesen.fr/wp-content/uploads/2017/11/coucc82t_fabrication_iphonex-785x588-768x575.png 768w, https://charlesen.fr/wp-content/uploads/2017/11/coucc82t_fabrication_iphonex-785x588-700x524.png 700w" sizes="(max-width: 785px) 100vw, 785px" /></p>charlesenCherchez l’erreur…Création d’entreprise : quel statut choisir ?2017-10-02T14:38:04+00:002017-10-02T14:38:04+00:00https://charlesen.github.io/creation-dentreprise-quel-statut-choisir<p><img loading="lazy" class="aligncenter wp-image-337 size-large" src="https://charlesen.fr/wp-content/uploads/2017/10/Infographie-forme-juridique-1-716x1024.jpg" alt="" width="700" height="1001" srcset="https://charlesen.fr/wp-content/uploads/2017/10/Infographie-forme-juridique-1-716x1024.jpg 716w, https://charlesen.fr/wp-content/uploads/2017/10/Infographie-forme-juridique-1-210x300.jpg 210w, https://charlesen.fr/wp-content/uploads/2017/10/Infographie-forme-juridique-1-489x700.jpg 489w, https://charlesen.fr/wp-content/uploads/2017/10/Infographie-forme-juridique-1.jpg 732w" sizes="(max-width: 700px) 100vw, 700px" /></p>charlesenMeilleure façon de compter des occurences en Python2015-11-21T07:44:57+00:002015-11-21T07:44:57+00:00https://charlesen.github.io/meilleure-facon-de-compter-des-occurences-en-python<p>Ce qui est en développement informatique, c’est que pour un problème donné à résoudre, il existe des dizaines, centaines, voir milliers de résolutions possibles. Le gros du travail revient en général à produire qui soit le plus optimisé possible.</p>
<p>Compter en Python n’est en soi pas un gros problème…A condition de le faire proprement. Je vous propose deux possibilités, en partant de la liste d’élements suivante :</p>
<p><span class="n" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; white-space: pre; background-color: #fdf6e3;">colors</span><span class="o" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; color: #586e75; white-space: pre; background-color: #fdf6e3;">=</span><span class="p" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; color: #586e75; white-space: pre; background-color: #fdf6e3;">[</span><span class="s" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; white-space: pre; background-color: #fdf6e3;">« brown »</span><span class="p" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; color: #586e75; white-space: pre; background-color: #fdf6e3;">,</span><span class="s" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; white-space: pre; background-color: #fdf6e3;">« red »</span><span class="p" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; color: #586e75; white-space: pre; background-color: #fdf6e3;">,</span><span class="s" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; white-space: pre; background-color: #fdf6e3;">« green »</span><span class="p" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; color: #586e75; white-space: pre; background-color: #fdf6e3;">,</span><span class="s" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; white-space: pre; background-color: #fdf6e3;">« yellow »</span><span class="p" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; color: #586e75; white-space: pre; background-color: #fdf6e3;">,</span><span class="s" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; white-space: pre; background-color: #fdf6e3;">« yellow »</span><span class="p" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; color: #586e75; white-space: pre; background-color: #fdf6e3;">,</span><span class="s" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; white-space: pre; background-color: #fdf6e3;">« brown »</span><span class="p" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; color: #586e75; white-space: pre; background-color: #fdf6e3;">,</span><span class="s" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; white-space: pre; background-color: #fdf6e3;">« brown »</span><span class="p" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; color: #586e75; white-space: pre; background-color: #fdf6e3;">,</span><span class="s" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; white-space: pre; background-color: #fdf6e3;">« black »</span><span class="p" style="margin: 0px; padding: 0px; border: 0px; line-height: 18.85px; font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; font-size: 13px; vertical-align: baseline; color: #586e75; white-space: pre; background-color: #fdf6e3;">]</span></p>
<p>Le but du jeux est de compter le nombre de fois que chaque élément apparait dans la liste, afin d’obtenir le résultat suivant :</p>
<p><strong>»> color_counts {‘brown’: 3, ‘yellow’: 2, ‘green’: 1, ‘black’: 1, ‘red’: 1}</strong></p>
<h3 id="la-méthode-basique">La méthode basique</h3>
<p>C’est celle à laquelle on aurait tous pensé immédiatement. On boucle sur la liste, et on incrémente un dictionnaire possédant l’objet recherché pour clé :</p>
<pre xml:lang="python" lines="true">[code]<br />colors = ["brown", "red", "green", "yellow", "yellow", "brown", "brown", "black"]<br />color_counts = {}<br />for c in colors:<br /> if color_counts.has_key(c):<br /> color_counts[c] = color_counts[c] + 1<br /> else:<br /> color_counts[c] = 1<br />[/code]</pre>
<h3 id="la-méthode-efficace">La méthode efficace</h3>
<p> On utilise cette fois un bloque Try afin de compter si cela est possible (fonction de la variable <strong>color_counts(c)</strong> ), sinon on lève une exception ou l’on initialise la variable à 1</p>
<pre xml:lang="python" lines="false">[code]<br />colors = ["brown", "red", "green", "yellow", "yellow", "brown", "brown", "black"]<br />color_counts = {}<br />for c in colors:<br /> try:<br /> color_counts[c] = color_counts[c] + 1<br /> except KeyError: <br /> color_counts[c] = 1<br />[/code]</pre>
<p> </p>
<p>Mais on peut faire encore plus efficace en utilisant la méthode <em><strong>get</strong></em> présente dans les dictionnaires :</p>
<pre xml:lang="css" lines="true">[code]<br />colors = ["brown", "red", "green", "yellow", "yellow", "brown", "brown", "black"]<br />color_counts = {}<br />for c in colors:<br /> color_counts[c] = color_counts.get(c, 0) + 1<br />[/code]</pre>
<p> </p>
<p style="text-align: center;">
<strong>Je suis sur et certain qu’il en existe encore d’autres, certainement plus efficace…Si vous en trouvez n’hésitez pas à commenter cet article</strong>
</p>charlesenCe qui est en développement informatique, c’est que pour un problème donné à résoudre, il existe des dizaines, centaines, voir milliers de résolutions possibles. Le gros du travail revient en général à produire qui soit le plus optimisé possible.4 Caractéristiques d’un(e) grand(e) orateur/trice2015-10-20T12:25:57+00:002015-10-20T12:25:57+00:00https://charlesen.github.io/4-caracteristiques-d-un-grand-orateur<p>La prise de parole en public, on le sait, peut vite devenir une véritable corvée. Si vous avez la phobie du public, pas de panique, vous êtes loin d’être un cas isolé. D’ailleurs, en 2014, un sondage a montré que la prise de parole en public était la peur n°1 des américains, devant la peur des aiguilles, des insectes et même des serpents. Mais pas besoin de vous convaincre que la prise de parole est une caractéristique indispensable à tout leader…A moins que vous soyez <a href="http://www.amazon.fr/gp/product/207036822X/ref=as_li_tl?ie=UTF8&camp=1642&creative=19458&creativeASIN=207036822X&linkCode=as2&tag=charlehomepa-21">Big Brother</a>.</p>
<p>Skip Weisman, un expert en communication, a dressé une liste de conseils pour aider les entreprises à améliorer leur communication. Selon lui, il existe quatre caractéristiques fondamentales à tout grand orateur.</p>
<h3 id="1--un-bon-orateur-est-concentré-sur-ses-objectifs">1 – Un bon orateur est concentré sur ses objectifs</h3>
<p>Tout part d’un objectif à atteindre. Que souhaitez-vous apporter à vos auditeurs ? Qu’aimeriez-vous qu’ils retiennent de votre présentation ? Vous devez absolument vous posez ce type de questions afin de commencer votre présentation, cela vous vous donnera du peps et vous évitera d’avancer à l’aveugle. Ne vous laissez pas perturber par votre ordinateur qui bug, la lumière de la pièce qui est trop forte/faible, cette personne qui ne crois pas en vous et donc fait fi de ne pas entendre ce que vous dites : vous avez un but à atteindre, courez vers lui.</p>
<p>Alimentez votre présentation d’exemples, de petites anecdotes, qui garderont votre auditoire éveillé et permettront de vous connecter à eux. Faites tout cela en gardant à l’esprit le but que vous désirez atteindre.</p>
<h3 id="2--un-bon-orateur-a-de-lassurance">2 – Un bon orateur a de l’assurance</h3>
<p>C’est surement la caractéristique qui fait le plus défaut à la plupart d’entre nous. C’est elle qui donne en quelque sorte le LA d’une présentation. Il est facile, dès les premières secondes, de connaitre la tournure que prendra une présentation, en mesurant l’assurance de l’intervenant. Il existe des gestes qui trahissent notre manque d’assurance comme le ton de notre voix, la fuite du regard,…et d’autres au contraire qui envoient un message rassurant, comme fixer son auditoire, parler à haute et intelligible voix, faire des gestes avec ses mains.</p>
<h3 id="3--un-bon-orateur-sait-raconter-des-histoires">3 – Un bon orateur sait raconter des histoires</h3>
<p>J’ai une bonne nouvelle pour vous : la plupart de vos (futurs) collaborateurs savent…LIRE. Par contre très peu savent écouter. Plutôt que leur faire une lecture longue et ennuyeuse, racontez leur des histoires, des récits qui vous permettront de transmettre votre message. Maintenez le contact en les soutenant du regard, en veillant à balayer la salle de façon linéaire. Ne restez pas focalisé sur une personne en particulier.</p>
<h3 id="4--un-bon-orateur-est-patient">4 – Un bon orateur est patient</h3>
<p>Quand vous vous adressez à un public, il est crucial de faire des pauses afin de le laisser réfléchir aux points clés que vous évoquez, recommande Weisman. Vous pouvez également poser des questions rhétoriques pour les poser à reflexion en les impliquant dans la présentation. La plupart répondront en eux-mêmes à ses questions, ce qui rendra votre discours beaucoup plus attachant.</p>
<p style="text-align: center;">
<strong>Avez-vous d’autres caractéristiques autres que celles cités ci-dessus ? Commentez cet article 😉</strong>
</p>charlesenLa prise de parole en public, on le sait, peut vite devenir une véritable corvée. Si vous avez la phobie du public, pas de panique, vous êtes loin d’être un cas isolé. D’ailleurs, en 2014, un sondage a montré que la prise de parole en public était la peur n°1 des américains, devant la peur des aiguilles, des insectes et même des serpents. Mais pas besoin de vous convaincre que la prise de parole est une caractéristique indispensable à tout leader…A moins que vous soyez Big Brother.Réseaux de neurones en Javascript avec Brain.js2015-10-09T11:36:17+00:002015-10-09T11:36:17+00:00https://charlesen.github.io/reseaux-de-neurones-en-javascript-avec-brain-js<p>Pour beaucoup de gens, faire de l’informatique se limite souvent à bidouiller son système d’exploitation (installer Windows 11 ! oui, oui c’est vrai), changer sa carte graphique, télécharger des fichiers mp3 ou encore jouer en réseau. Mais l’informatique, née de la recherche mathématiques, est beaucoup plus que ça, bien qu’elle soit aujourd’hui à la portée (il faut entendre accessible) de tous. Tant mieux d’ailleurs. Mais il est bien de se rappeler qu’au commencement de l’Informatique, il y a les mathématiques. La mécanique n’a pas disparu, elle est simplement enfouit dans les entrailles des processeurs de nos ordinateurs actuels. Son esprit, celui des mathématiques, aussi invisible soit-il, est bien présent. Là, au coeur de l’informatique.</p>
<p>Selon Wikipédia, et je l’approuve :</p>
<p style="text-align: center;">
<strong><em>« Un réseau de neurones (artificiel) est un modèle de calcul dont la conception est très schématiquement inspirée du fonctionnement des neurones biologiques. »</em></strong>
</p>
<p>En clair, la branche appelée réseaux de neurones s’inspire du fonctionnement du cerveau pour élaborer des modèles algorithmiques (Tiens je me demande si la première définition n’était pas plus simple finalement).</p>
<p>Un algorithme simple se contente de résoudre (si possible) un problème particulier (transvaser des objets, suite de finobacci,…), tandis qu’un réseau de neurones s’adapte, se développe, reflechit et s’améliore à force d’apprentissage. Un peu comme notre cerveau, bien qu’un réseau de neurone ne prétend pas davantage imiter celui-ci, qu’une l’aile d’avion copie celle d’un oiseau.</p>
<hr id="system-readmore" style="width: 921.688px; word-spacing: 0px;" />
<p>Les réseaux de neurones ont permis de résoudre des problèmes complèxes, difficilement résolvables à partir de simples algorithmes. Citons par exemple La reconnaissance faciale (technique qui permet de retrouver une personne en fonction d’une image de son visage), largement utilisée dans la vidéo-surveillance (aéroport, site sensibles, rues,…), dans la recherche de personnes (un membre de la famille dont on aura pour seul souvenir une photo) ou encore la robotique.</p>
<p>Il existe de nombreux outils pour travailler avec les réseaux de neurones, mais nous nous interesserons dans cet article à une librairie Javascript appelée <a href="https://github.com/harthur/brain" target="_blank" rel="noopener"><strong>Brain.js</strong></a>.</p>
<p>Cette librairie nous évitera de faire des mathématiques pour mieux se concentrer sur les résultats escomptés. Si vous n’êtes pas très porté(e) sur les mathématique, pas de panique on fera pas. Brain.js simplifie énormément l’utilisation des réseaux de neurones en proposant très peu de méthodes au sein de son API. Gardons tout de même en mémoire les deux étapes à respecter à savoir : Apprentissage et Détection Automatique (Probabilités)</p>
<p>Le but de l’entraînement est de permettre au réseau de neurones « d’apprendre » à partir d’exemples données en entrée du système. Si l’entraînement est correctement réalisé, le réseau est capable de fournir des réponses en sortie très proches des valeurs d’origines du jeu de données d’entraînement. Mais tout l’intérêt des réseaux de neurones réside dans leur capacité à généraliser à partir du jeu de test.</p>
<p>Pour permettre la détection automatique d’un OU-exclusif (XOR), un exemple classique, il suffit de faire :</p>
<pre style="color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; margin: 0px 0px 10px; overflow: auto; padding: 0px; line-height: 1.42857; border: none; background-image: none; background-attachment: initial; background-position: initial; background-repeat: initial;"><code class="language-javascript hljs" style="font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0.5em; color: #f8f8f2; white-space: pre-wrap; display: block; background: #23241f;"><span class="hljs-keyword" style="color: #f92672;">var</span> brain = <span class="hljs-built_in" style="color: #e6db74;">require</span>(<span class="hljs-string" style="color: #e6db74;">'brain'</span>);<span class="hljs-keyword" style="color: #f92672;">var</span> net = <span class="hljs-keyword" style="color: #f92672;">new</span> brain.NeuralNetwork(); net.train([{input: [<span class="hljs-number" style="color: #ae81ff;">0</span>, <span class="hljs-number" style="color: #ae81ff;">0</span>], output: [<span class="hljs-number" style="color: #ae81ff;">0</span>]}, {input: [<span class="hljs-number" style="color: #ae81ff;">0</span>, <span class="hljs-number" style="color: #ae81ff;">1</span>], output: [<span class="hljs-number" style="color: #ae81ff;">1</span>]}, {input: [<span class="hljs-number" style="color: #ae81ff;">1</span>, <span class="hljs-number" style="color: #ae81ff;">0</span>], output: [<span class="hljs-number" style="color: #ae81ff;">1</span>]}, {input: [<span class="hljs-number" style="color: #ae81ff;">1</span>, <span class="hljs-number" style="color: #ae81ff;">1</span>], output: [<span class="hljs-number" style="color: #ae81ff;">0</span>]}]);<span class="hljs-keyword" style="color: #f92672;">var</span> output = net.run([<span class="hljs-number" style="color: #ae81ff;">1</span>, <span class="hljs-number" style="color: #ae81ff;">0</span>]); <span class="hljs-comment" style="color: #75715e;">// [0.933] </span> </code></pre>
<p>Dans l’exemple ci-dessus, on commence par entrainer (apprentissage) notre Réseau en lui disant : Si tu vois O et O, alors renvoie 0, puis si tu vois 0 et 1, renvoie 1,…</p>
<p>A la dernière ligne, on teste ensuite le réseau en lui demandant ce que pourrait renvoyer les entrées 1 et 0. Ce qu’il répond par 0.933, soit environ 1.</p>
<p>On pourrait également imaginer un autre système qui permettrait par exemple de détecter automatiquement l’humeur des gens en fonctions des textes qu’ils publient sur internet par exemple. Avec implémenter un tel système avec Brain.js est d’une facilité déconcertante.</p>
<p>La librairie propose différentes options suffiantes pour créer un réseau simple et puissant à la fois :</p>
<pre style="color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; margin: 0px 0px 10px; overflow: auto; padding: 0px; line-height: 1.42857; border: none; background-image: none; background-attachment: initial; background-position: initial; background-repeat: initial;"><code class="language-javascript hljs" style="font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: inherit; padding: 0.5em; color: #f8f8f2; white-space: pre-wrap; display: block; background: #23241f;"><span class="hljs-keyword" style="color: #f92672;">var</span> net = <span class="hljs-keyword" style="color: #f92672;">new</span> brain.NeuralNetwork({ hiddenLayers: [<span class="hljs-number" style="color: #ae81ff;">128</span>,<span class="hljs-number" style="color: #ae81ff;">64</span>] }); net.train({ errorThresh: <span class="hljs-number" style="color: #ae81ff;">0.005</span>, <span class="hljs-comment" style="color: #75715e;">// seul d'erreur acceptable</span> iterations: <span class="hljs-number" style="color: #ae81ff;">20000</span>, <span class="hljs-comment" style="color: #75715e;">// Nombre maximum d'iterations durant l'apprentissage </span> log: <span class="hljs-literal" style="color: #ae81ff;">true</span>, <span class="hljs-comment" style="color: #75715e;">// Affichage des logs avec console.log() </span> logPeriod: <span class="hljs-number" style="color: #ae81ff;">10</span>, <span class="hljs-comment" style="color: #75715e;">// Nombres d'itérations entre les logs </span> learningRate: <span class="hljs-number" style="color: #ae81ff;">0.3</span> <span class="hljs-comment" style="color: #75715e;">// Taux d'apprentissage </span> }); </code></pre>
<p>N’hésitez pas à visiter le <a href="https:/github.com/harthur/brain%20Réseaux%20de%20neurones%20artificiels%20:%20https:/fr.wikipedia.org/wiki/R%C3%A9seau_de_neurones_artificiels" target="_blank" rel="noopener">site de la Librairie</a> pour plus d’informations sur les options, le projet,… Vous n’avez pas finit d’aimer l’intelligence artificielle.</p>
<h3 id="plus-dinformations">Plus d’informations</h3>
<ul>
<li>Site du projet Brain.js : <a href="https://github.com/harthur/brain">https://github.com/harthur/brain</a></li>
<li>Réseaux de neurones artificiels : <a href="https://fr.wikipedia.org/wiki/R%C3%A9seau_de_neurones_artificiels">https://fr.wikipedia.org/wiki/R%C3%A9seau_de_neurones_artificiels</a></li>
</ul>charlesenPour beaucoup de gens, faire de l’informatique se limite souvent à bidouiller son système d’exploitation (installer Windows 11 ! oui, oui c’est vrai), changer sa carte graphique, télécharger des fichiers mp3 ou encore jouer en réseau. Mais l’informatique, née de la recherche mathématiques, est beaucoup plus que ça, bien qu’elle soit aujourd’hui à la portée (il faut entendre accessible) de tous. Tant mieux d’ailleurs. Mais il est bien de se rappeler qu’au commencement de l’Informatique, il y a les mathématiques. La mécanique n’a pas disparu, elle est simplement enfouit dans les entrailles des processeurs de nos ordinateurs actuels. Son esprit, celui des mathématiques, aussi invisible soit-il, est bien présent. Là, au coeur de l’informatique.Comment Booster le chargement de votre site sur mobile avec AMP HTML2015-10-08T08:59:51+00:002015-10-08T08:59:51+00:00https://charlesen.github.io/comment-booster-le-chargement-de-votre-site-sur-mobile-avec-amp-html<p>Dans un <a href="index.php?option=com_content&view=article&id=169:google-lance-le-projet-amp&catid=36&Itemid=55">article précédent</a>, je vous parlais du Projet AMP lancé par Google dans le but d’accélerer la consultation de contenus en ligne depuis un appareil mobile (smartphone, tablette,…). La librairie AMP HTML permet d’implémenter les spécifications du projet grâce l’intégration d’un fichier Javascript et l’insertion d’un certain nombre de metadonnées.</p>
<!--more-->
<p> </p>
<h3 id="comment-ça-marche">Comment ça marche</h3>
<p>AMP HTML fonctionne par insertion de sa librairie Javascritp et en suivant une certaine mise en page HTML</p>
<pre style="overflow: auto; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; margin-top: 0px; margin-bottom: 0px; line-height: 1.45; padding: 16px; color: #333333; background-color: #f7f7f7;"><!doctype html> <<span class="pl-ent" style="color: #63a35c;">html</span> ⚡> <<span class="pl-ent" style="color: #63a35c;">head</span>> <<span class="pl-ent" style="color: #63a35c;">meta</span> <span class="pl-e" style="color: #795da3;">charset</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>utf-8<span class="pl-pds">"</span></span>> <<span class="pl-ent" style="color: #63a35c;">link</span> <span class="pl-e" style="color: #795da3;">rel</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>canonical<span class="pl-pds">"</span></span> <span class="pl-e" style="color: #795da3;">href</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>hello-world.html<span class="pl-pds">"</span></span> > <<span class="pl-ent" style="color: #63a35c;">meta</span> <span class="pl-e" style="color: #795da3;">name</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>viewport<span class="pl-pds">"</span></span> <span class="pl-e" style="color: #795da3;">content</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>width=device-width,minimum-scale=1,initial-scale=1<span class="pl-pds">"</span></span>> <span class="pl-s1"> <<span class="pl-ent" style="color: #63a35c;">style</span>><span class="pl-ent" style="color: #63a35c;">body</span> {<span class="pl-c1" style="color: #0086b3;"><span class="pl-c1">opacity</span></span>: <span class="pl-c1" style="color: #0086b3;"></span>}</<span class="pl-ent" style="color: #63a35c;">style</span>></span><<span class="pl-ent" style="color: #63a35c;">noscript</span>><span class="pl-s1"><<span class="pl-ent" style="color: #63a35c;">style</span>><span class="pl-ent" style="color: #63a35c;">body</span> {<span class="pl-c1" style="color: #0086b3;"><span class="pl-c1">opacity</span></span>: <span class="pl-c1" style="color: #0086b3;">1</span>}</<span class="pl-ent" style="color: #63a35c;">style</span>></span></<span class="pl-ent" style="color: #63a35c;">noscript</span>> <span class="pl-s1"> <<span class="pl-ent" style="color: #63a35c;">script</span> <span class="pl-e" style="color: #795da3;">async</span> <span class="pl-e" style="color: #795da3;">src</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>https://cdn.ampproject.org/v0.js<span class="pl-pds">"</span></span>></<span class="pl-ent" style="color: #63a35c;">script</span>></span> </<span class="pl-ent" style="color: #63a35c;">head</span>> <<span class="pl-ent" style="color: #63a35c;">body</span>>Hello World!</<span class="pl-ent" style="color: #63a35c;">body</span>> </<span class="pl-ent" style="color: #63a35c;">html</span>></pre>
<p>Ce bout de code permet le chargement de ressources qui accelereront la page. Les tags obligatoires à une utilisation optimale du Framework sont les suivants :</p>
<ol>
<li>Le doctype HTML 5 : <!doctype html></li>
<li>L’attribut <span style="color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; line-height: 21.76px; background-color: rgba(0, 0, 0, 0.0392157);">⚡ </span>ou simplement <strong>amp</strong> dans le tag html (<html amp>)</li>
<li>Les tags <strong>head</strong> et <strong>body</strong>. Ceux-ci sont en effet optionnels en HTML (non ce n’est pas du laxisme, juste question de perf…)</li>
<li>Un lien canonique : <link rel= »canonical » href= »$UNE_URL » /></li>
<li>L’encodage utf-8 : <meta charset= »utf-8″></li>
<li>Le viewport : <meta name= »viewport » content= »width=device-width,minimum-scale=1″></li>
<li>La librairie JS : <script async src= »https://cdn.ampproject.org/v0.js »></script></li>
</ol>
<p>L’exemple était plutôt basique, mais dans la vraie vie, un site contient des images, des vidéos,…AMP propose différents composants qui vont nous permettre d’inclure ces différents élements.</p>
<h3 id="inclure-des-images">Inclure des images</h3>
<pre style="overflow: auto; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; margin-top: 0px; margin-bottom: 0px; line-height: 1.45; padding: 16px; color: #333333; background-color: #f7f7f7;"><!doctype html> <<span class="pl-ent" style="color: #63a35c;">html</span> <span class="pl-e" style="color: #795da3;">AMP</span> <span class="pl-e" style="color: #795da3;">lang</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>en<span class="pl-pds">"</span></span>> <<span class="pl-ent" style="color: #63a35c;">head</span>> <<span class="pl-ent" style="color: #63a35c;">meta</span> <span class="pl-e" style="color: #795da3;">charset</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>utf-8<span class="pl-pds">"</span></span>> <<span class="pl-ent" style="color: #63a35c;">title</span>>Hello, AMPs</<span class="pl-ent" style="color: #63a35c;">title</span>> <<span class="pl-ent" style="color: #63a35c;">link</span> <span class="pl-e" style="color: #795da3;">rel</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>canonical<span class="pl-pds">"</span></span> <span class="pl-e" style="color: #795da3;">href</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>https://charlesen.fr/comment-booster-le-chargement-de-votre-site-sur-mobile-avec-amp-html.html<span class="pl-pds">"</span></span> /> <<span class="pl-ent" style="color: #63a35c;">meta</span> <span class="pl-e" style="color: #795da3;">name</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>viewport<span class="pl-pds">"</span></span> <span class="pl-e" style="color: #795da3;">content</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>width=device-width,minimum-scale=1,initial-scale=1<span class="pl-pds">"</span></span>> <span class="pl-s1"> <<span class="pl-ent" style="color: #63a35c;">script</span> <span class="pl-e" style="color: #795da3;">type</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>application/ld+json<span class="pl-pds">"</span></span>></span> <span class="pl-s1"> {</span> <span class="pl-s1"> <span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>@context<span class="pl-pds">"</span></span><span class="pl-k" style="color: #a71d5d;">:</span> <span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>http://schema.org<span class="pl-pds">"</span></span>,</span> <span class="pl-s1"> <span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>@type<span class="pl-pds">"</span></span><span class="pl-k" style="color: #a71d5d;">:</span> <span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>NewsArticle<span class="pl-pds">"</span></span>,</span> <span class="pl-s1"> <span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>headline<span class="pl-pds">"</span></span><span class="pl-k" style="color: #a71d5d;">:</span> <span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>Une page avec des images<span class="pl-pds">"</span></span>,</span> <span class="pl-s1"> <span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>datePublished<span class="pl-pds">"</span></span><span class="pl-k" style="color: #a71d5d;">:</span> <span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>2015-10-07T12:02:41Z<span class="pl-pds">"</span></span>,</span> <span class="pl-s1"> <span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>image<span class="pl-pds">"</span></span><span class="pl-k" style="color: #a71d5d;">:</span> [</span> <span class="pl-s1"> <span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>logo.jpg<span class="pl-pds">"</span></span></span> <span class="pl-s1"> ]</span> <span class="pl-s1"> }</span> <span class="pl-s1"> </<span class="pl-ent" style="color: #63a35c;">script</span>></span> <span class="pl-s1"> <<span class="pl-ent" style="color: #63a35c;">style</span>><span class="pl-ent" style="color: #63a35c;">body</span> {<span class="pl-c1" style="color: #0086b3;"><span class="pl-c1">opacity</span></span>: <span class="pl-c1" style="color: #0086b3;"></span>}</<span class="pl-ent" style="color: #63a35c;">style</span>></span><<span class="pl-ent" style="color: #63a35c;">noscript</span>><span class="pl-s1"><<span class="pl-ent" style="color: #63a35c;">style</span>><span class="pl-ent" style="color: #63a35c;">body</span> {<span class="pl-c1" style="color: #0086b3;"><span class="pl-c1">opacity</span></span>: <span class="pl-c1" style="color: #0086b3;">1</span>}</<span class="pl-ent" style="color: #63a35c;">style</span>></span></<span class="pl-ent" style="color: #63a35c;">noscript</span>> <span class="pl-s1"> <<span class="pl-ent" style="color: #63a35c;">script</span> <span class="pl-e" style="color: #795da3;">async</span> <span class="pl-e" style="color: #795da3;">src</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>https://cdn.ampproject.org/v0.js<span class="pl-pds">"</span></span>></<span class="pl-ent" style="color: #63a35c;">script</span>></span> </<span class="pl-ent" style="color: #63a35c;">head</span>> <<span class="pl-ent" style="color: #63a35c;">body</span>> <<span class="pl-ent" style="color: #63a35c;">h1</span>>Une page plus élaborée</<span class="pl-ent" style="color: #63a35c;">h1</span>> <<span class="pl-ent" style="color: #63a35c;">amp</span><span class="pl-e" style="color: #795da3;">-img</span> <span class="pl-e" style="color: #795da3;">src</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>welcome.jpg<span class="pl-pds">"</span></span> <span class="pl-e" style="color: #795da3;">alt</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>Welcome<span class="pl-pds">"</span></span> <span class="pl-e" style="color: #795da3;">height</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>2000<span class="pl-pds">"</span></span> <span class="pl-e" style="color: #795da3;">width</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>800<span class="pl-pds">"</span></span>></<span class="pl-ent" style="color: #63a35c;">amp</span><span class="pl-e" style="color: #795da3;">-img</span>> </<span class="pl-ent" style="color: #63a35c;">body</span>> </<span class="pl-ent" style="color: #63a35c;">html</span>></pre>
<p>Les attributs recommandés sont :</p>
<ul>
<li>Les dimensions (largeur-width et hauteur – height)</li>
<li>Un text alternatif au cas votre image mettrait longtemps à se charger (réseaux,…)</li>
</ul>
<p> </p>
<h3 id="inclure-des-vidéos">Inclure des vidéos</h3>
<pre style="overflow: auto; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; margin-top: 0px; margin-bottom: 0px; line-height: 1.45; padding: 16px; color: #333333; background-color: #f7f7f7;"><<span class="pl-ent" style="color: #63a35c;">amp</span><span class="pl-e" style="color: #795da3;">-video</span> <span class="pl-e" style="color: #795da3;">width</span>=<span class="pl-s" style="color: #183691;">400</span> <span class="pl-e" style="color: #795da3;">height</span>=<span class="pl-s" style="color: #183691;">300</span> <span class="pl-e" style="color: #795da3;">src</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>https://votresite.com/videos/unevideo.mp4<span class="pl-pds">"</span></span> <span class="pl-e" style="color: #795da3;">poster</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"unevideo</span>-image-preview.jpg<span class="pl-pds">"</span></span>> <<span class="pl-ent" style="color: #63a35c;">div</span> <span class="pl-e" style="color: #795da3;">fallback</span>> <<span class="pl-ent" style="color: #63a35c;">p</span>>Votre navigateur ne supporte pas le tag video HTML5 :-(</<span class="pl-ent" style="color: #63a35c;">p</span>> </<span class="pl-ent" style="color: #63a35c;">div</span>> </<span class="pl-ent" style="color: #63a35c;">amp</span><span class="pl-e" style="color: #795da3;">-video</span>></pre>
<p> </p>
<p>Vous pouvez aussi inclure une vidéo Youtube…Il faut dans ce cas inclure autre fichier Javascript (Pour des raisons évidentes de rapidité, la librairie ne prend en compte que les tags de base : img, video,..)</p>
<pre style="overflow: auto; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; margin-top: 0px; margin-bottom: 0px; line-height: 1.45; padding: 16px; color: #333333; background-color: #f7f7f7;"><<span class="pl-ent" style="color: #63a35c;">script</span> <span class="pl-e" style="color: #795da3;">async</span> <span class="pl-e" style="color: #795da3;">custom-element</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>amp-youtube<span class="pl-pds">"</span></span> <span class="pl-e" style="color: #795da3;">src</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>https://cdn.ampproject.org/v0/amp-youtube-0.1.js<span class="pl-pds">"</span></span>></<span class="pl-ent" style="color: #63a35c;">script</span>></pre>
<p>Considérons la vidéo suivante : <a href="https://www.youtube.com/watch?v=DNoROPIEsGQ">https://www.youtube.com/watch?v=DNoROPIEsGQ</a> (Un cadeau que j’aimerai bien avoir à Noël :D). L’inclure dans notre page se fait simplement :</p>
<pre style="overflow: auto; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; margin-top: 0px; margin-bottom: 0px; line-height: 1.45; padding: 16px; color: #333333; background-color: #f7f7f7;"><<span class="pl-ent" style="color: #63a35c;">amp</span><span class="pl-e" style="color: #795da3;">-youtube</span> <span class="pl-e" style="color: #795da3;">data-videoid</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"DNoROPIEsGQ</span><span class="pl-pds">"</span></span> <span class="pl-e" style="color: #795da3;">layout</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>responsive<span class="pl-pds">"</span></span> <span class="pl-e" style="color: #795da3;">width</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>480<span class="pl-pds">"</span></span> <span class="pl-e" style="color: #795da3;">height</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>270<span class="pl-pds">"</span></span>> </<span class="pl-ent" style="color: #63a35c;">amp</span><span class="pl-e" style="color: #795da3;">-youtube</span>></pre>
<p>L’attribut <em><strong>layout</strong></em> permet de gérer automatiquement différentes résolutions d’écran.</p>
<p> </p>
<p>De nombreux <a href="https://github.com/ampproject/amphtml/blob/master/docs/include_features.md" target="_blank" rel="noopener">autres élements</a> sont gérer par le Framework : audio, tweet,…</p>
<p> </p>
<h3 id="plus-dinformations">Plus d’informations</h3>
<ul>
<li>Page Github (sources, tutoriels,…) : <a href="https://github.com/ampproject/amphtml">https://github.com/ampproject/amphtml</a></li>
</ul>charlesenDans un article précédent, je vous parlais du Projet AMP lancé par Google dans le but d’accélerer la consultation de contenus en ligne depuis un appareil mobile (smartphone, tablette,…). La librairie AMP HTML permet d’implémenter les spécifications du projet grâce l’intégration d’un fichier Javascript et l’insertion d’un certain nombre de metadonnées.Google lance le projet AMP (Accelerated Mobile Pages)2015-10-08T07:32:23+00:002015-10-08T07:32:23+00:00https://charlesen.github.io/google-lance-le-projet-amp<p>Les mobiles (smartphone, tablettes,…) font aujourd’hui partie de notre quotidien. Il ne se passe pas une seconde (j’exagère peut être un peu) sans que nous nous retrouvions à pianoter sur notre téléphone mobile ou tablette à la recherche d’articles de presse sur internet, du dernier film sorti au cinéma, du score du dernier classico (<strong><em>Ici c’est PARIS !</em></strong>) ou encore des dernières news sur Facebook, Google+, Twitter, … Bref, nous consommons énormement de contenus sur internet via nos appareils mobiles et ça les éditeurs de site d’informations l’ont bien compris…tout comme GOOGLE (enfin, <a href="index.php?option=com_content&view=article&id=151:google-et-sanofi-s-attaquent-ensemble-au-diabete&catid=36&Itemid=55">Alphabet</a>) d’ailleurs.</p>
<!--more-->
<p>Le hic, c’est qu’il n’est pas toujours évident de consulter ces contenus en lignes en raison de fortes latences du côté des technologies mobiles (Edge, 3G+ ou 4G+ pour les plus chanceux). Et dans une société comme la notre où l’on veut TOUT dans la seconde même, de nombreux utilisateurs se découragent très peu de temps après avoir cliqué sur un lien.</p>
<p><em><strong>Chaque fois qu’une page met du temps à se charger, les sites d’informations perdent des mobinautes et surtout l’opportunité de faire des bénéfices via la publicité et les contenus sponsorisés.</strong></em></p>
<p>C’est pour résoudre tous ces problèmes (ou presque) que Google a lancé le projet AMP, en partenariat avec de célèbres éditeurs de contenus en ligne (BBC, Buzzfeed, Mashable, The Economist, Les Echos,…) et des entreprises du domaine des nouvelles technologies (Google, Adobe, LinkedIn, Twitter, WordPress,…)</p>
<p>Objectif affiché : permettre un chargement instantané de contenus multimédias (vidéos, animations, publicités,…) sur tout type d’appareil mobile (smartphone, tablette,…).</p>
<p>Le projet utilise un framework appelé <a href="https://github.com/ampproject/amphtml" target="_blank" rel="noopener">AMP HTML</a>, qui permettra une meilleur gestion du cache et des performances des navigateurs. Il suffira pour intégrer le framework d’insérer un petit fichier Javascript disponible à l’adresse <a href="https://charlesen.fr/wp-content/uploads/2015/10/https%3A__cdn.ampproject.org_v0.js">https://cdn.ampproject.org/v0.js</a>, sans oublier d’insérer les bonnes métadonnées (viewport, canonical,…)</p>
<div class="highlight highlight-text-html-basic" style="margin-bottom: 16px; color: #333333; font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif; font-size: 16px; line-height: 25.6px;">
<pre style="overflow: auto; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; margin-top: 0px; margin-bottom: 0px; line-height: 1.45; padding: 16px; background-color: #f7f7f7;"><!doctype html> <<span class="pl-ent" style="color: #63a35c;">html</span> ⚡> <<span class="pl-ent" style="color: #63a35c;">head</span>> <<span class="pl-ent" style="color: #63a35c;">meta</span> <span class="pl-e" style="color: #795da3;">charset</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>utf-8<span class="pl-pds">"</span></span>> <<span class="pl-ent" style="color: #63a35c;">link</span> <span class="pl-e" style="color: #795da3;">rel</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>canonical<span class="pl-pds">"</span></span> <span class="pl-e" style="color: #795da3;">href</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>hello-world.html<span class="pl-pds">"</span></span> > <<span class="pl-ent" style="color: #63a35c;">meta</span> <span class="pl-e" style="color: #795da3;">name</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>viewport<span class="pl-pds">"</span></span> <span class="pl-e" style="color: #795da3;">content</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui<span class="pl-pds">"</span></span>> <span class="pl-s1"> <<span class="pl-ent" style="color: #63a35c;">script</span> <span class="pl-e" style="color: #795da3;">src</span>=<span class="pl-s" style="color: #183691;"><span class="pl-pds">"</span>https://cdn.ampproject.org/v0.js<span class="pl-pds">"</span></span> <span class="pl-e" style="color: #795da3;">async</span>></<span class="pl-ent" style="color: #63a35c;">script</span>></span> <span class="pl-s1"> <<span class="pl-ent" style="color: #63a35c;">style</span>><span class="pl-ent" style="color: #63a35c;">body</span> {<span class="pl-c1" style="color: #0086b3;"><span class="pl-c1">opacity</span></span>: <span class="pl-c1" style="color: #0086b3;"></span>}</<span class="pl-ent" style="color: #63a35c;">style</span>></span><<span class="pl-ent" style="color: #63a35c;">noscript</span>><span class="pl-s1"><<span class="pl-ent" style="color: #63a35c;">style</span>><span class="pl-ent" style="color: #63a35c;">body</span> {<span class="pl-c1" style="color: #0086b3;"><span class="pl-c1">opacity</span></span>: <span class="pl-c1" style="color: #0086b3;">1</span>}</<span class="pl-ent" style="color: #63a35c;">style</span>></span></<span class="pl-ent" style="color: #63a35c;">noscript</span>> </<span class="pl-ent" style="color: #63a35c;">head</span>> <<span class="pl-ent" style="color: #63a35c;">body</span>>Hello World!</<span class="pl-ent" style="color: #63a35c;">body</span>> </<span class="pl-ent" style="color: #63a35c;">html</span>></pre>
</div>
<p>Ce bout de code permet d’inclure :</p>
<ul>
<li>La libraire Javascript de l’AMP</li>
<li>Le validateur AMP qui permettra (certainement) à Google de distinguer les pages conformes aux spécificationx du projet (ceci pourrait, dans l’avenir, jouer dans le référencement)</li>
<li>Des <a href="http://www.html5rocks.com/en/tutorials/webcomponents/customelements/" target="_blank" rel="noopener">composants HTML</a> beaucoup plus spécifiques aux contenus (autres que de simples balises <strong><em>div</em></strong> qui peuvent dire tout et n’importe quoi)</li>
</ul>
<p> </p>
<h3 id="plus-dinformations">Plus d’informations</h3>
<ul>
<li>Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web : <a href="http://googlepolicyeurope.blogspot.fr/2015/10/introducing-accelerated-mobile-pages.html">http://googlepolicyeurope.blogspot.fr/2015/10/introducing-accelerated-mobile-pages.html</a></li>
<li>Site internet du projet AMP : <a href="https://www.ampproject.org/">https://www.ampproject.org/</a></li>
<li>AMP HTML : <a href="https://github.com/ampproject/amphtml">https://github.com/ampproject/amphtml</a></li>
</ul>charlesenLes mobiles (smartphone, tablettes,…) font aujourd’hui partie de notre quotidien. Il ne se passe pas une seconde (j’exagère peut être un peu) sans que nous nous retrouvions à pianoter sur notre téléphone mobile ou tablette à la recherche d’articles de presse sur internet, du dernier film sorti au cinéma, du score du dernier classico (Ici c’est PARIS !) ou encore des dernières news sur Facebook, Google+, Twitter, … Bref, nous consommons énormement de contenus sur internet via nos appareils mobiles et ça les éditeurs de site d’informations l’ont bien compris…tout comme GOOGLE (enfin, Alphabet) d’ailleurs.