| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue127:c_c [2017/12/03 08:43] – d52fr | issue127:c_c [2017/12/04 09:37] (Version actuelle) – auntiee |
|---|
| | //**N.B., Bab, le titre du mois dernier devrait être remplacer par AMP, tout simplement !!**// |
| | |
| **Earlier this month, I went to the AMP Roadshow as it arrived in my city. It took place at the local Google headquarters, and was dedicated to new features coming to AMP, as well as the newer features that had already dropped. It included keynotes (with examples) as well as a codelab segment with a variety of tutorials. As such, I wanted to use my article this month to cover some of the things I learned.** | **Earlier this month, I went to the AMP Roadshow as it arrived in my city. It took place at the local Google headquarters, and was dedicated to new features coming to AMP, as well as the newer features that had already dropped. It included keynotes (with examples) as well as a codelab segment with a variety of tutorials. As such, I wanted to use my article this month to cover some of the things I learned.** |
| |
| Plus tôt ce mois-ci, je suis allé à l'AMP Roadshow qui arrivait dans ma ville. Il s'était installé dans les bureaux locaux de Google et était dédié aux nouveautés prochaines d'AMP ainsi qu'aux nouvelles fonctionnalités qui avait été déjà mises sur le marché. Des points presse étaient prévus (avec des exemples) tout comme une section « codelab » (labo de codage) avec tout un ensemble de tutoriels. Ainsi, je voulais utiliser l'article de ce mois pour pésenter certaines choses que j'ai apprises. | Plus tôt ce mois-ci, je suis allé à l'AMP Roadshow qui arrivait dans ma ville. Il s'était installé dans les bureaux locaux de Google et était dédié aux nouveautés prochaines d'AMP ainsi qu'aux nouvelles fonctionnalités qui avait déjà été mises sur le marché. Des points presse étaient prévus (avec des exemples) tout comme une section « codelab » (labo de codage) avec tout un ensemble de tutoriels. Ainsi, je voulais utiliser cet article pour présenter certaines choses que j'ai apprises. |
| |
| **Learning by Example | **Learning by Example |
| • https://ampstart.com/ - Ce site offre des modèles complets que vous pouvez télécharger et utiliser comme point de départ. D'après une note de presse d'AMP, le site Web devrait bientôt être mis à jour avec une option de personnalisation. | • https://ampstart.com/ - Ce site offre des modèles complets que vous pouvez télécharger et utiliser comme point de départ. D'après une note de presse d'AMP, le site Web devrait bientôt être mis à jour avec une option de personnalisation. |
| |
| La meilleure façon d'approcher ceci serait de trouver dans AMP Start un modèle que vous aimez, puis d'ajouter les éléments à partir d'AMP by Example (AMP par l'exemple) jusqu'à ce que vous arriviez à la disposition que vous voulez. Idéalement, le fait d'avoir un but en tête avant de commencer, vous permettra d'accélérer le processus (comme convertir un site existant). | La meilleure façon d'approcher ceci serait de trouver dans AMP Start un modèle qui vous plaît, puis d'ajouter les éléments à partir d'AMP by Example (AMP par l'exemple) jusqu'à ce que vous arriviez à la disposition que vous voulez. Idéalement, le fait d'avoir un but en tête avant de commencer (comme convertir un site existant), vous permettra d'accélérer le processus. |
| |
| |
| Dois-je écrire tout le HTML à la main ? | Dois-je écrire tout le HTML à la main ? |
| |
| Non. Si vous voulez utiliser un générateur de site statique (tel que Grow), vous pouvez incorporer le CSS directement dans la page (requis par AMP), et vous pouvez paramétrer les structures HTML pour y inclure le contenu. Si, au contraire, vous chercher un module intégré pour un CMS, il y a apparemment des plugins pour Wordpress et Drupal. Il y a aussi un projet sur Github, appelé amp-library, qui cherche à convertir du HTML ordinaire en HTML AMP. le projet peut être trouvé ici : https://github.com/Lullabot/amp-library | Non. Si vous voulez utiliser un générateur de site statique (tel que Grow), vous pouvez incorporer le CSS directement dans la page (requis par AMP), et vous pouvez paramétrer les structures HTML pré-définies pour y inclure le contenu. Si, au contraire, vous chercher un module intégré pour un CMS, il y a apparemment des plugins pour Wordpress et Drupal. Il y a aussi un projet sur Github, appelé amp-library, qui cherche à convertir du HTML ordinaire en HTML AMP. Le projet peut être trouvé ici : https://github.com/Lullabot/amp-library |
| |
| |
| Yes. As with any programming exercises, you learn more by doing it all by hand at first, before relying on tools to automate tasks. The more you have to write the HTML for an element, after all, the better you’ll remember it later. Naturally, if time is of the essence, do whatever you can to speed up the process. If you end up with some free time later, you can always return to manually writing it.** | Yes. As with any programming exercises, you learn more by doing it all by hand at first, before relying on tools to automate tasks. The more you have to write the HTML for an element, after all, the better you’ll remember it later. Naturally, if time is of the essence, do whatever you can to speed up the process. If you end up with some free time later, you can always return to manually writing it.** |
| |
| Dois-je écrire à la main tout le HTML et incorporer le CSS ? | Dois-je écrire à la main tout le HTML et incorporer le CSS ? |
| |
| Oui. Comme pour tout exercice de programmation, vous apprenez mieux en le faisant d'abord à la main, avant de vous appuyer sur des outils pour automatiser les tâches. Après tout, plus vous écrivez de HTML pour un élément, mieux vous vous en souviendrez plus tard. Naturellement, si le temps est fondamental, faites tout ce que vous pouvez pour accélérer le processus. Si vous trouver un peu de temps libre plus tard, vous pourrez toujours revenir à de l'écriture manuelle. | Oui. Comme pour tout exercice de programmation, vous apprenez mieux en le faisant d'abord à la main, avant de vous appuyer sur des outils pour automatiser les tâches. Après tout, plus vous écrirez de HTML pour un élément, mieux vous vous en souviendrez plus tard. Naturellement, si le temps presse, faites tout ce que vous pouvez pour accélérer le processus. Si vous trouvez un peu de temps libre plus tard, vous pourrez toujours revenir à l'écriture manuelle. |
| |
| **What about interactivity? | **What about interactivity? |
| A relatively recent addition to AMP is amp-bind. It allows you to store state and interconnect elements within a page. A nice example of that is on AMP By Example: https://ampbyexample.com/introduction/amp_for_e-commerce_getting_started/ ** | A relatively recent addition to AMP is amp-bind. It allows you to store state and interconnect elements within a page. A nice example of that is on AMP By Example: https://ampbyexample.com/introduction/amp_for_e-commerce_getting_started/ ** |
| |
| Et pour l'interactivité ? | Et pour l'interactivité ? |
| |
| amp-bind est un ajout relativement récent à AMP. Il vous permet de stocker l'état et d'interconnecter des éléments d'une page. Un exemple sympa de cela est dans AMP by Example : https://ampbyexample.com/introduction/amp_for_e-commerce_getting_started/ | amp-bind est un ajout relativement récent à AMP. Il vous permet de stocker l'état et d'interconnecter des éléments d'une page. Un exemple sympa de cela est dans AMP by Example : https://ampbyexample.com/introduction/amp_for_e-commerce_getting_started/ |
| Mon site Web est une appli Web évolutive - puis-je utiliser AMP ? | Mon site Web est une appli Web évolutive - puis-je utiliser AMP ? |
| |
| Ceci a été vraiment beaucoup traité lors de l'AMP Roadshow. La capacité d'installer un « service worker » (NdT : pour info, voir https://developer.mozilla.org/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers#Le_pr%C3%A9ambule_aux_Service_Workers) a été ajoutée récemment par AMP, ce qui donne la possibilité d'installer le service worker en tâche de fond, puis de le mettre au niveau des PWA (Progressive Web Apps - Applis Web évolutives) quand les utilisateurs interagissent avec votre site. | En fait, cela fut beaucoup traité lors de l'AMP Roadshow. La capacité d'installer un « service worker » (NdT : pour info, voir https://developer.mozilla.org/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers#Le_pr%C3%A9ambule_aux_Service_Workers) a été ajoutée récemment par AMP, ce qui donne la possibilité d'installer le service worker en tâche de fond, puis de le mettre au niveau des PWA (Progressive Web Apps - Applis Web évolutives) quand les utilisateurs interagissent avec votre site. |
| |
| De plus, il est possible de créer un cadre pour PWA, qui ensuite charge du contenu à partir des pages d'AMP en utilisant un DOM fantôme. | De plus, il est possible de créer un cadre pour PWA, qui charge ensuite du contenu à partir des pages d'AMP en utilisant un DOM fantôme. |
| |
| Un codelab pour vous apprendre ceci peut être trouvé ici : https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/#0 | Un codelab pour vous apprendre ceci peut être trouvé ici : https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/#0 |
| Conclusion | Conclusion |
| |
| AMP est une merveilleuse bibliothèque à laquelle accéder. Elle offre un bon équilibre entre la v=facilité d'usage et la performance. Alors vous faites face à certaines limitations en l'utilisant, d'après mon expérience, les limitations vous rendent la vie plus facile en empêchant une quantité de défauts communs sur le Web. Naturellement, vous devrez toujours faire la part des bons et des mauvais points suivant ce que vous devez construire. Ceci dit, AMP mérite votre considération. La principale exception est si vous devez inclure un JS personnalisé - car AMP ne le permet pas (à part dans des iframes). | AMP est une merveilleuse bibliothèque à laquelle accéder. Elle offre un bon équilibre entre la facilité d'usage et la performance. Tout en faisant face à certaines limitations en l'utilisant, d'après mon expérience, les limitations vous rendent la vie plus facile en vous protégeant d'une quantité de piratages classiques sur le Web. Naturellement, vous devrez toujours faire la part des bons et des mauvais points en fonction de ce que vous devez construire. Cela étant dit, AMP mérite votre considération. La principale exception est si vous devez inclure un JS personnalisé, car AMP ne le permet pas (à part dans des iframes). |
| | |
| J'espère que cet article a intéressé au moins quelques lecteurs. Et peut-être que quelques uns d'entre vous voudrons essayer AMP dans le futur - et voudrons peut-être contribuer au projet. Si vous avez des questions sur AMP, contactez l'équipe d'AMP sur Github ou Twitter, ou envoyez-moi un mail à lswest34+fcm@gmail.com. Si vous avez des idées pour de futurs articles, n'hésitez pas à me les envoyer. | |
| |
| | J'espère que cet article a intéressé au moins quelques lecteurs. Et il se peut que quelques-uns d'entre vous vouliez essayer AMP dans le futur et même contribuer au projet. Si vous avez des questions sur AMP, contactez l'équipe d'AMP sur Github ou Twitter, ou envoyez-moi un mail à lswest34+fcm@gmail.com. Si vous avez des idées pour de futurs articles, n'hésitez pas à me les envoyer. |
