Full Circle Magazine FR

Outils pour utilisateurs

Outils du site

Piste : • c_c • edito • labo_linux_1
issue127:c_c

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
issue127:c_c [2017/12/03 08:13] – d52frissue127:c_c [2017/12/04 09:37] (Version actuelle) – auntiee
Ligne 1: Ligne 1:
 +//**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
Ligne 17: Ligne 19:
 • 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.
  
  
Ligne 24: Ligne 26:
 No. If you want to use a static site generator (such as Grow), you can embed the CSS directly into the page (required by AMP), and can set up predefined HTML structures to drop content into. If you’re instead looking for a plugin for a CMS, there are apparently plugins for Wordpress or Drupal. There’s also a project on GitHub called amp-library, which is intended to convert normal HTML to AMP HTML. The project can be found here: https://github.com/Lullabot/amp-library ** No. If you want to use a static site generator (such as Grow), you can embed the CSS directly into the page (required by AMP), and can set up predefined HTML structures to drop content into. If you’re instead looking for a plugin for a CMS, there are apparently plugins for Wordpress or Drupal. There’s also a project on GitHub called amp-library, which is intended to convert normal HTML to AMP HTML. The project can be found here: https://github.com/Lullabot/amp-library **
  
-Devez-vous é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+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 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
  
  
Ligne 32: Ligne 35:
  
 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 ?
 +
 +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é ?
 +
 +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/
  
 **My Website is a Progressive Web App - can I use AMP? **My Website is a Progressive Web App - can I use AMP?
Ligne 44: Ligne 55:
  
 A codelab to teach you this can be found here: https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/#0 ** A codelab to teach you this can be found here: https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/#0 **
 +
 +Mon site Web est une appli Web évolutive - puis-je utiliser AMP ?
 +
 +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 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
 +
  
 **Conclusion **Conclusion
Ligne 50: Ligne 70:
  
 I hope this article was interesting to at least a few readers. And perhaps a few of you will be trying AMP in the future - will maybe even contribute to the project. If you have any questions about AMP, you’re welcome to contact the AMP team on GitHub or Twitter, or email me at lswest34+fcm@gmail.com. If you have requests for other articles, please send them to me as well.** I hope this article was interesting to at least a few readers. And perhaps a few of you will be trying AMP in the future - will maybe even contribute to the project. If you have any questions about AMP, you’re welcome to contact the AMP team on GitHub or Twitter, or email me at lswest34+fcm@gmail.com. If you have requests for other articles, please send them to me as well.**
 +
 +Conclusion
 +
 +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 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.
issue127/c_c.1512285234.txt.gz · Dernière modification : 2017/12/03 08:13 de d52fr