AMP

Configuration

Prérequis

Avant de commencer ce tutoriel, vous aurez besoin des éléments suivants :

  • Des bases en HTML, CSS et JavaScript
  • Une compréhension des concepts de base d'AMP (voir le tutoriel "Convertir votre HTML en AMP")
  • Un navigateur de votre choix
  • Un éditeur de texte de votre choix

Configurez votre environnement de développement

Étape 1. Téléchargez le code

  1. Téléchargez le code du tutoriel, qui est compressé sous forme de fichier zip à partir de l'URL suivante : https://github.com/ampproject/docs/raw/master/tutorial_source/amp-pets-story.zip

  2. Extrayez le contenu du fichier zip. Dans le répertoire amp-pets-story se trouvent les fichiers d'images, vidéo, audio et de données que nous utiliserons pour créer notre story. Le fichier pets.html est notre point de départ pour la story. La version complète de la story se trouve dans le fichier pets-completed.html.

Étape 2. Exécutez la page d'exemple

To test our sample Web Story, we need to access the files from a web server. There are several ways to create a temporary local web server for the purposes of testing. Here are some options, choose the one that works best for you:

After setting up your local web server, have a look at what our completed Web Story will look like by the end of this tutorial by accessing the following URL:

http://localhost:8000/pets-completed.html

IMPORTANT – Assurez-vous que l'URL soit fournie à partir du localhost, sinon la story Web risque de ne pas être chargée correctement, et vous pourriez rencontrer des erreurs telles que "source" "must start with "https://" or "//" or be relative and served from either https or from localhost.

Cliquez sur la story terminée pour avoir une idée de ce que nous allons créer.