Consultez la formation SEO spéciale Wordpress
par WebRankInfo / Ranking Metrics

Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Lun Nov 14, 2016 13:38

Bonjour

Je suis en train de développer mon formulaire ( en mode POST obligatoirement ) à étoiles en AMP.

Théoriquement, action-xhr doit être un script Ajax du type : XMLHttpRequest ou : Fetch API.

Mais, je n'ai jamais vu d'exemple d'un tel script.

Je ne vois pas comment si je programme un script Ajax de ce type, il pourrait être compatible AMP.

Merci beaucoup de votre aide.

Respectueusement.
Haut
36 Réponses
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Mar Nov 15, 2016 11:56

Rebonjour

1- Les scripts de type JSON sont les seuls acceptés par la norme AMP, dans les amp-form.

2- action-xhr doit lancer un script de la page, donc de type JSON.

Mais... Est-il possible de lancer dans un script JSON, un autre script à distance, sur le même site indeed ?

Je vais voir sur internet et mes exemples de David Walsh.

Merci beaucoup de vos réponses.

Amicalement.
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Mar Nov 15, 2016 16:17

Bonjour

Voilà, j'ai refait l'interface sans fichier graphique, et quand je clique, il y a une erreur " Subscription failed",
ce qui prouve que l'input a réagi correctement.

Maintenant je dois faire un ( théoriquement simple ) script JSON dans cette page, qui permette à la form de lancer un script à distance ( en https ).

Je pourrais m'inspirer du script JSON ci-dessous, mais je ne sais pas transmettre de paramètre à ce script.

Le paramètre, serait param ( nombre d'étoiles ), le paramètre transmis par l'event : "submit".

Merci beaucoup de votre aide.

Respectueusement.


Code: Tout sélectionner

<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<title>Nouvelles Courses</title>
<link rel="canonical" href="new_tmp.php">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora">
<style amp-custom>
html,body,header,section,article,aside,h1,h2,h3,h4,h5,h6,nav,p,ul,button,figure {
box-sizing: border-box;
    margin: 0;
    border: none;
    padding: 0;
}
a {
text-decoration: none;
}
ul,ol {
list-style: none;
}
body {
font-family: Lora, sans-serif;
font-size:20px;
}
@media screen and (max-width:640px){
body, button.header-button, button.menu-button, li.menu-item {
font-size:16px;
}
}
form.amp-form-submit-success [submit-success],
form.amp-form-submit-error [submit-error]{
margin-top: 16px;
}
form.amp-form-submit-success [submit-success] {
color: green;
}
form.amp-form-submit-error [submit-error] {
color: red;
}
form.amp-form-submit-success.hide-inputs > input {
display: none
}
#staring_form
{
display:inline-block;
background-color:rgb(255, 255, 255);
border-collapse:collapse;
border-radius:6px;
border:thin solid rgb(0, 0, 0);
font-size:18px;
margin-left:auto;
margin-right:auto;
padding: 8px 6px;
text-align:center;
max-width:90%;
}
form#form_votes fieldset
{
border:thin solid rgb(0, 0, 0);
border-radius:4px;
padding:7px 0;
margin:15px 0px 0px 0px;
}
/* 
 * Rating styles
 */
.votes_rating {
direction: rtl;
width: 210px;
margin: auto;
font-size: 25px;
/* overflow:hidden;   */
}
.votes_rating input {
opacity: 0;
position: absolute;
}
.votes_rating label {
color: green;
text-decoration: none;
}
.votes_rating label:hover ~ label,
.votes_rating input:focus ~ label,
.votes_rating input:checked ~ label,
.votes_rating label:hover {
color: orange;
cursor: pointer;
}
ul#current-rating
{
text-align:center;
width: 275px;
margin: 0 auto;
font-size: 22px;
}
ul#current-rating li
{
display:inline-block;
text-align:center;
width: 23.5px;
margin: 0 auto;
font-weight:600;
color:rgb(225,169,0);
}
div.centered
{
display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
</head>
<body>

<p><br /></p>

<amp-analytics>
    <script type="application/json">
        {
            "requests": {
                "event": "https://www.ampproject.org/static/img/logo-blue.svg?eid=${eventId}"
            },
            "triggers": {
                "formSubmitSuccess": {
                    "on": "amp-form-submit-success",
                    "request": "event",
                    "vars": {
                        "eventId": "form-submit-success"
                    }
                },
                "formSubmitError": {
                    "on": "amp-form-submit-error",
                    "request": "event",
                    "vars": {
                        "eventId": "form-submit-error"
                    }
                }
            }
        }
    </script>
</amp-analytics>

<p><br /></p>

<div class="centered">

<div id="staring_form" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<div class="sous_titre" itemprop="itemreviewed">Page d'Accueil</div>
<br/>
<div class="sous_titre" itemprop="votes">162</div>
<div class="sous_titre">Votes</div>
&nbsp;&nbsp;<div class="sous_titre">3.5 / 7</div>
<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<form method="post"
   id="form_votes" action-xhr="https://www.pronostics-courses.fr/new_tmp.php"
   target="_blank"
   custom-validation-reporting="as-you-go">
      <fieldset>
   <p>Votre vote :</p>
   <div class="votes_rating">
   <input name="param" value="7" id="e7" type="submit"><label for="e7">&starf;</label>
   <input name="param" value="6" id="e6" type="submit"><label for="e6">&starf;</label>
   <input name="param" value="5" id="e5" type="submit"><label for="e5">&starf;</label>
   <input name="param" value="4" id="e4" type="submit"><label for="e4">&starf;</label>
   <input name="param" value="3" id="e3" type="submit"><label for="e3">&starf;</label>
   <input name="param" value="2" id="e2" type="submit"><label for="e2">&starf;</label>
   <input name="param" value="1" id="e1" type="submit"><label for="e1">&starf;</label>
   </div>
   <ul id="current-rating">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   </ul>
     </fieldset>

     <div submit-success>
   <template type="amp-mustache">
   Subscription successful!
   </template>
     </div>
     <div submit-error>
   <template type="amp-mustache">
   Subscription failed!
   </template>
     </div>
</form>
<meta itemprop="average" content="3.5"/>
<meta itemprop="best" content="7"/>
<meta itemprop="worst" content="1"/>
</div>

</div>
</div>

<p><br /></p>

</body>
</html>

Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Mer Nov 16, 2016 22:24

Bonjour

La nouvelle norme AMP de Google, fait que les formulaires html ( <form etc... ), ne sont plus supportés, au profit des <amp-form> , et que pour les formulaires de type POST, l'action doit être de la forme : "action-xhr", qui déclenche un sript JSON sur la page.

Merci de me détromper si je suis dans l'erreur.

Mon problème ( avec une "<amp-form type="POST", serait de déclencher, avec le script JSON, un script php ( du même site ) qui se charge de prendre en compte le paramètre "param" , qui est la seule donnée fournie par le formulaire lors de la submission.

Ce problème a trois facettes :

1) Transmission de "param" du formulaire au script JSON,

2) Lancement du script php avec le paramètre "param",

3) Récupération des résultats du calcul/traitement du script php.


Il faut ajouter, qu'avec amp-form et un autre composant AMP ( lequel je ne sais pas ), la submission de l'amp-form, entraîne bien l'activation du script JSON, de manière automatique.

Ceci ( d'après la documentation de Google ), soit en mode Fetch API, soit en mode XMLHttpRequest, suivant ce que le navigateur supporte.


Mais... Je n'arrive pas à trouver sur le net, d'exemples de scripts JSON qui accèdent à un script tiers externe.

Après, il resterait la transmission de la donnée de l'amp-form au script JSON.

Merci de m'éclairer par rapport à cette problématique particulière aux amp-form en mode post, qui n'accèdent pas directement à des urls externes. ( l'attribut "action" est interdit dans ce cas ).

Merci beaucoup de vos réponses.

Amicalement.
Haut
Messages: 140

Enregistré le: 17 Oct 2009

Message le Jeu Nov 17, 2016 13:27

J'ai un peu regardé les formulaires AMP ce matin et j'ai réussi à le faire fonctionner.
Pas de script JSON à mettre en place. AMP fonctionne avec HTML 5 CORS, donc la communication entre PHP et le fichier doit être définie et les entêtes doivent préciser l'origine acceptée des fichiers.

J'ai crée un exemple bidon.
Le formulaire envoi un champ de texte et PHP renvoi cette donnée. Rien d'extra c'est juste pour la démo.

Démo ici : http://cresel-cms.com/amp/

Testé avec Firefox, Chrome. Avec Safari 5 ça ne fonctionne pas (mais c'est plutôt logique).

Voici mon fichier html :
Code: Tout sélectionner
<!doctype html>
<html amp lang="fr">
<head>
    <title>Test formulaire AMP</title>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <link rel="canonical" href="/test_amp.html">
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
   <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
body{
   width: auto;
   margin: 0;
   padding: 0;
}
</style>
</head>
<body>
<form method="post" action-xhr="https://www.cresel-cms.com/amp/form.php" target="_blank">
   <p><label for="email">Un texte : </label><input type="text" name="name" value="" required></p>
   <p><label> </label><input type="submit" value="Envoyer"></p>
   
   <div submit-success>
      <template type="amp-mustache">Le texte renvoyé par PHP : {{name}}</template>
   </div>
   <div submit-error>
      <template type="amp-mustache">Erreur !</template>
   </div>
</form>
</body>
</html>


Et voici mon fichier PHP
Code: Tout sélectionner
<?php
// on génère du JSON
header('Content-Type: application/json');
// défini les entêtes CORS
// il s'agit de s'assurer que le script et le fichier HTML sont copains https://www.html5rocks.com/en/tutorials/cors
header('Access-Control-Allow-Origin: http://cresel-cms.com'); // ici il faut mettre ton serveur
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin');
header('AMP-Access-Control-Allow-Source-Origin: http://cresel-cms.com'); // ici il faut mettre ton serveur. Tu peux utiliser 'https://'.$_SERVER['HTTP_HOST']

// ici on fait ce qu'on à faire avec nos données $_POST
$data = array();
$data['name'] = $_POST['name'];
// quand c'est fini on renvois le résultat au fichier HTML
// encode le résultat au format JSON
echo json_encode($data);
?>


En fait c'est très simple,il n'y a que les histoires d'entête qui sont un peu prise de tête à définir quand on ne sait pas.
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Jeu Nov 17, 2016 13:57

Bonjour Monsieur

Une seule question :

{{name}} est le paramètre lancé par le formulaire, ou le résultat affiché par le script php ?

Merci beaucoup de votre aide.

Chaleureusement.
Haut
Messages: 140

Enregistré le: 17 Oct 2009

Message le Jeu Nov 17, 2016 14:00

C'est une variable du résultat JSON généré par le fichier PHP.
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Jeu Nov 17, 2016 14:09

Bonjour Monsieur

Je vais tester ( après le déjeuner ) sur mon site.

Je croyais que le script lancé par action-xhr, ne pouvait pas être un script externe, mais je me trompais.

Super merci beaucoup de ton aide. ;)

Respectueusement et chaleureusement.
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Sam Nov 19, 2016 19:45

Rebonjour niap

Ton exemple fonctionne.

Ma form ci-dessous ne fonctionne pas.

C'est l'url suivante :

https://www.pronostics-courses.fr/php/form_amp/old_courses.php

Le script est lancé, les deux valeurs hidden "request_uri" et "id-session" sont reçues par le script, mais la donnée: "star" n'est pas reçue. J'ai testé en loguant avec la fonction syslog().

C'est le seul problème qui reste à résoudre.

Voici les headers lancés par le script :

Code: Tout sélectionner
header('Content-Type: application/json');
// défini les entêtes CORS
header('Access-Control-Allow-Origin: https://' . $_SERVER['HTTP_HOST']); // ici il faut mettre ton serveur
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin');
header('AMP-Access-Control-Allow-Source-Origin: https://' . $_SERVER['HTTP_HOST']); // ici il faut mettre ton serveur. Tu peux utiliser 'https://'.$_SERVER['HTTP_HOST']



Voici le code du formulaire :

Code: Tout sélectionner

<form method="post" action-xhr="https://www.pronostics-courses.fr/php/form_amp/form_script.php" target="_blank">
<fieldset>
<input type="hidden" name="request_uri" value="/php/form_amp/old_courses">
<input type="hidden" name="id_session" value="mj742r4ndd2kageq4tuc30j0nvkppaa9r603jcaeas2kj17ti8k0">
<div class="votes_rating">
<input name="star" value="7" id="e7" type="submit"><label for="e7">&starf;</label><input name="star" value="6" id="e6" type="submit"><label for="e6">&starf;</label><input name="star" value="5" id="e5" type="submit"><label for="e5">&starf;</label><input name="star" value="4" id="e4" type="submit"><label for="e4">&starf;</label><input name="star" value="3" id="e3" type="submit"><label for="e3">&starf;</label><input name="star" value="2" id="e2" type="submit"><label for="e2">&starf;</label><input name="star" value="1" id="e1" type="submit"><label for="e1">&starf;</label></div>
<ul id="current-rating">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
</fieldset>

<div submit-success>
<template type="amp-mustache">
<meta itemprop="average" content="{{arrondi_vote_moyen}}"/>
<meta itemprop="best" content="7"/>
<meta itemprop="worst" content="1"/>
&nbsp;&nbsp;<div id="message">
{{message2}}<br/>
{{message1}}</div>
</template>
</div>
<div submit-error>
<template type="amp-mustache">
<p>Erreur !</p>
</template>
</div>
</form>



Dans "journalctl -f" il n'y a aucune erreur.

Je me tire les cheveux.

Merci beaucoup de ton aide.

Respectueusement.
Haut
Messages: 140

Enregistré le: 17 Oct 2009

Message le Sam Nov 19, 2016 22:19

Bonsoir,

Remplace les input type submit par des input type radio. Apparement AMP ne laissent pas passer des multiples input type submit... ou alors mal :roll:

https://www.cresel-cms.com/amp-form/

Code: Tout sélectionner
<!doctype html>
<html amp lang="fr">
<head>
   <title>Test formulaire AMP</title>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <link rel="canonical" href="/test_amp.html">
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
   <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<form method="post" action-xhr="https://www.cresel-cms.com/amp-form/form.php" target="_blank">
   <fieldset>
      <input type="hidden" name="request_uri" value="/php/form_amp/old_courses">
      <input type="hidden" name="id_session" value="mj742r4ndd2kageq4tuc30j0nvkppaa9r603jcaeas2kj17ti8k0">
      <div class="votes_rating">
         <input name="star" value="7" id="e7" type="radio"><label for="e7">&starf;</label>
         <input name="star" value="6" id="e6" type="radio"><label for="e6">&starf;</label>
         <input name="star" value="5" id="e5" type="radio"><label for="e5">&starf;</label>
         <input name="star" value="4" id="e4" type="radio"><label for="e4">&starf;</label>
         <input name="star" value="3" id="e3" type="radio"><label for="e3">&starf;</label>
         <input name="star" value="2" id="e2" type="radio"><label for="e2">&starf;</label>
         <input name="star" value="1" id="e1" type="radio"><label for="e1">&starf;</label>
      </div>
      <input name="Submit" value="Voter" type="submit">
      <ul id="current-rating">
      <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li>
      </ul>
   </fieldset>
   <div submit-success>
      <template type="amp-mustache">Star : {{star}}</template>
   </div>
   <div submit-error>
      <template type="amp-mustache">Erreur !</template>
   </div>
</form>
</body>
</html>


Code: Tout sélectionner
<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: https://'.$_SERVER['HTTP_HOST']);
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin');
header('AMP-Access-Control-Allow-Source-Origin: https://'.$_SERVER['HTTP_HOST']);

$data = array();
$data['star'] = $_POST['star'];
echo json_encode($data);
?>
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Dim Nov 20, 2016 17:13

Bonjor niap ;)

C'est ok, j'ai obtenu/logué la chaîne Json suivante :

Code: Tout sélectionner

 {"star":"3","id_session":"6ggpqbkut587fq1cv77bi27c53passpjh08qbaupnrc64acq2bu0","arrondi_vote_moyen":"4.5","message1":"","message2":""}




Mais le formulaire répond toujours obstinément : "Erreur".

Voici l'url du formulaire :

https://www.pronostics-courses.fr/php/form_amp/old_courses.php

J'ai mis en dessous dans le <template-success> les trois valeurs dont j'ai besoin :

{{arrondi_vote_moyen}} , {{message2}} et {{message1}}

Comme je suis obligé d'activer la session dans le script ( form_script.php ), j'ai mis un ob_start() et un ob_end_flush() à la fin.

Cependant la valeur "id_session" je n'en ai pas besoin.

Peut-être l'amp-form n'aime pas les variables vides ?

Ou bien le id="message" encadrant ces variables vides, cet id n'est pas fixé.

Merci beaucoup de ton aide.

Respecteusement.
Haut
Messages: 140

Enregistré le: 17 Oct 2009

Message le Dim Nov 20, 2016 21:15

Tu as des erreurs dans tes fichiers, regarde la console (sous Chrome)
log.js:399
Uncaught SyntaxError: Form submission failed:: Unexpected token <

old_courses.php:1
Refused to load the image 'https://amp-error-reporting.appspot.com/r?v=1478801557976&noAmp=0&m=Script%…onostics-courses.fr%2Fphp%2Fform_amp%2Fold_courses.php&f=&l=&c=&r=&ae=&fr=' because it violates the following Content Security Policy directive: "img-src 'self' data: localhost https://www.pronostics-courses.fr https://cdn.ampproject.org https://s3.eu-central-1.amazonaws.com https://www.google-analytics.com https://syndication.twitter.com https://www.facebook.com".
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Lun Nov 21, 2016 9:19

Bonjour niap

Je vais de ce pas corriger les CSP directives de mon serveur VPS.

Merci beaucoup de ton aide.

Respectueusement.
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Mar Nov 22, 2016 9:33

Bonjour niap

Super çà marche. ;)

Je vais changer les libellés et apparences, et corriger les css.

Après, je vais adapter ce formulaire à mon site, sachant que le reste du site n'est pas compatible AMP.

Sur mon ordinateur, je ne pourrai pas encore mettre cette version en ligne, ( de peur d'indisposer Google avec un site AMP non compatible ).

Merci beaucoup de ton aide.

Respectueusement.
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Jeu Nov 24, 2016 12:12

Bonjour

Voici l'url : https://www.pronostics-courses.fr/php/form_amp/old_courses.php

Je détecte automatiquement ( mobile ou desktop ) si le navigateur est compatible AMP, sinon c'est la version classique.

Actuellement, je détecte les navigateurs suivants :

Chrome >=28.0
Firefox >= 38.0
Android >= 4.0

J'aurais besoin de savoir pour d'autres navigateurs ( Safari, IE, Edge, Opera ), lesquels sont compatibles AMP.

Mon formulaire ( version AMP ), a un problème, les indications en dessous du formulaire, sont dédoublés en statique et dynamique après choix par le visiteur.

Egalement, le vote est valable 30 jours, ne peut pas être répété, sauf ( c'est mon cas ), lorsque que j'ai une adresse ipv4 puis ipv6 ( ou le contraire ).

Je ne sais pas mettre un amp-form en mode disabled, aussi la version AM du formulaire peut être lancée n'importe quand, mais si le vote est déjà enregistré, il n'est pas pris en compte.

Les ip ne sont pas enregistrée, seulement un hash code.

Merci beaucoup de vos avis.

Merci beaucoup à niap de son aide.

Amicalement.
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Jeu Déc 01, 2016 0:02

Bonjour

Maintenant, ( c'est un autre topic ), j'ai terminé de fiabiliser ma version full PHP de tarteaucitron.

La logique est la suivante :

Les clics sur des lien/boutons ( sur l'ancienne interface ), sont remplacés par des clics sur des boutons ( de même apparence ), déclenchant chacun un formulaire avec un paramètre hidden composite.

Au lieu de prendre en compte les clics en déclenchant des fonctions Javascript, les clics sur les boutons, déclenchent un rechargement de la page en cours, et le paramètre ( en mode POST ), interprété, fait que la bonne fonction ( avec son paramètre ), est lancée, ce qui modifie dynamiquement les classes du code html de tarteaucitron, tout en agissant comme il faut sur le cookie.

Les formulaires sont obligatoirement en mode POST, c'est la seule façon de ne pas avoir de paramètres supplémentaires dans l'url.

J'ai l'intention, de porter cette version de tarteaucitron ( full PHP, sans Javascript ), en mode AMP, ce qui nécessite plusieurs choses :

- Les formulaires en mode POST, ne peuvent plus recharger la page entièrement.

- Les données issues de ces formulaires, ne peuvent pas être propagées pour modifier les classes du code html.

Je suis dans la mouise, je ne vois pas comment faire pour adapter ce script au mode AMP.

Merci beaucoup de votre aide.

Amicalement.
Haut
Messages: 140

Enregistré le: 17 Oct 2009

Message le Jeu Déc 01, 2016 0:59

Miam de la tarte au citron :-D
C'est quoi l'adresse du site ?

Alors pour ton problème, le but est de faire quoi ? On peut voir un exemple pour avoir une idée ?
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Jeu Déc 01, 2016 10:30

Bonjour Monsieur

Voici l'adresse du site : https://www.pronostics-courses.fr

Il faudrait d'abord vérifier si ma version de ce système de gestion des cookies, est pleinement compliante avec la Directive Européenne sur les cookies, et avec les desiderata de la CNIL.

Tarteaucitron est le nom du script original, donné par son inventeur, et qui est en license GPL.

Le problème, consiste à convertir ma version de tarteaucitron, vers une version compatible avec la norme AMP de Google.

Les formulaires seront encore comme actuellement en mode POST, mais en mode AMP ce serait des "action-xhr" et non pas des "action" simples.,

Pour ma deuxième question : La propagation du paramètre hidden transmis par le formulaire ( AMP ) , peut se faire simplement par une variable de session, qui serait affectée par le script lancé.

Et ma première question : Est-il possible ( par exemple avec une amp-lightbox ), que le formulaire déclenche une fenêtre surgissante ?

Cette fenêtre surgissante, est actuellement simulée par la modification dynamique des classes css, elle-même permise par le rechargement de la page induit par le formulaire ( non AMP ).

C'est le cas quand on clique sur le bouton "Personnaliser", ou "Gestion des cookies".

Cette fenêtre, permet de visualiser plusieurs boutons d'activation/désactivation des services.

Si c'est impossible d'avoir la main sur plusieurs boutons de ce type, à ce moment-là c'est un problème pur d'interface, qui serait réduite à une portion de l'écran, qui ne permettrait que d'agir sur tous les services en même temps ( Universal Analytics, Google+, Facebook etc... ) et non pas individuellement.

Tout le problème est là : Avec un formulaire AMP ( plus autres composants AMP si nécessaire ), est-il possible de déclencher l'équivalent d'une fenêtre surgissante ( modale.. ) ?

Ceci, pour avoir le choix d'activation ou désactivation de chaque services ?

Voici donc ma question : Un formulaire AMP peut-il déclencher une autre page, ou la même page ?

Merci beaucoup de ton aide.

Respectueusement.
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Jeu Déc 01, 2016 12:32

Rebonjour

En théorie, un formulaire AMP peut activer une amp-lightbox.

Mais comment passer un paramètre à une amp-lightbox ?

Ceci à partir d'un amp-form ?

Merci beaucoup de votre aide.

Amicalement.
Haut
Messages: 140

Enregistré le: 17 Oct 2009

Message le Jeu Déc 01, 2016 14:26

Tu as besoin de traiter les données de retour ?
Sinon avec amp-mustache
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Jeu Déc 01, 2016 15:36

Bonjour Niap

En fait traiter les données ( un seul paramètre ) de retour de l'amp-form , ce serait pouvoir les transmettre à l'amp-lightbox et les traiter en aval. Pas possible avec amp-mustache.

Sinon, deux composant simultanés : l'amp-form et l'amp-lightbox, qui puissent être déclenchés en même temps par un clic.

Sinon, sans amp-form je fixe les données des amp-lighbox en amont ( une amp-ligthbox par bouton actif ).

Mais... 1) une amp-lighbox est destinée à contenir des boutons, qui ne pourraient être que des amp-form ( en mode POST ).

Et... 2) Problème de traitements différents ( un par amp-lightbox ) dans la page initiale en amont pour le cookie.

Il y a plusieurs problèmes :

- Quels objets interfaces ?

- Transmission ( éventuelle ) des données aux objets fils,

- Traitement des données en fonction des choix utilisateurs.

- Ajoutons aussi : les objets fils sont censés ne pas être passifs, c-à-d qu'ils peuvent contenir des amp-form ( simples ).

Merci beaucoup de ton aide.
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Jeu Déc 01, 2016 20:40

Rebonjour

Il semblerait d'après l'exemple ci-dessous de Stackoverflow , que l'on puisse mette un formulaire non AMP dans une amp-ligtbox.

Voici l'exemple :

Code: Tout sélectionner

<body>
 <button class="lightClick" on="tap:my-lightbox"
      role="button"
      tabindex="0">
    Subscribe
  </button>


  <amp-lightbox id="my-lightbox"
      layout="nodisplay">
    <div class="lightbox">

    <div class="setUpForm">
    <div class="cansle" on="tap:my-lightbox.close"
        role="button"
        tabindex="0">X</div>
    <h2>Subscribe and get 20% off on your first order</h2>
     <form method="post"
      action=""
      target="_top">
    <input type="text"
        name="name"
        placeholder="Name..."
        required>
    <input type="email"
        name="email"
        placeholder="Email..."
        required>
    <input type="submit"
        value="Subscribe"
        class="button button-primary">
  </form>
  </div>
    </div>
  </amp-lightbox>
  </body>
  </html>



Si c'était vrai, mon problème serait théoriquement résolu, car les formulaires paramétrés seraient tous dans cette lightbox, et pourraient chacun avoir un paramètre différent.

Leur déclenchement pourrait faire disparaître la lightbox, tout en rechargeant la page de départ ?

Les deux boutons de la page père "Personnaliser" et "Gestion des cookies" ( <button> ... </button> ) gérant l'amp-ligthbox, n'ont pas de paramètre.

Confirmez-vous, qu'il est possible d'avoir un <form> non AMP de type post avec un attribut "action" ( et non pas action-xhr ) ?

Merci beaucoup de votre réponse.

Amicalement.
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Jeu Déc 01, 2016 22:10

Bonjour

Après test : Cà ne marche pas.

Les forms dans la lightbox doivent être de type AMP ( "action-xhr" au lieu de "action" ).

Normalement ( espérons ) tout formulaire ( AMP ) déclenché dans une amp-lightbox ( avec target="_blank" ), devrait rester dans la lightbox ( ouverte ).

Je vais faire une maquette.

Respectueusement.
Haut
Messages: 140

Enregistré le: 17 Oct 2009

Message le Ven Déc 02, 2016 17:56

Alors tu t'en sors ?
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Ven Déc 02, 2016 18:35

Bonjour Monsieur

Je suis en train de coder, j'ai des amp-lightbox ou <div> avec des id, et le clic sur l'un d'entre eux, doit pouvoir faire disparaître celui cliqué, et d'autres light-box ou <div> en même temps.

Je sais qu'il faut ajouter au <div> ( ou à l' <amp-lightbox> suivant le cas ), un : "on:tamp.classe_ligthbox.close".

Pour des classes, c'est possible de déclencher plusieurs actions en même temps ( je ne sais pas comment ).

Et, pour des id je ne sais pas du tout comment faire.

A part les amp-ligtbox, j'ai des <amp-form> ( nécessaire pour transmettre un paramètre POST ), je peux prendre en compte le traitement du script déclenché, mais si l'action-xhr est la page entière, je ne sais pas ce qui se passe.

Le script /page entière sera-t-il relancé, et comment déclencher en plus les actions sur les display ( comme ci-dessus ) ?

Comment aussi, changer la couleur de certains éléments d'interface, qui ne sont pas nécessairement dans les <amp-form> ?

Avant je le faisais en changeant l'élément de classe css.

Pour l'instant, c'est surtout la syntaxe pour des déclenchements multiples ( voir au début ) pour les id et on:tap. dont j'aurais besoin.

J'y vais pas à pas.

Merci beaucoup de ton aide.

Respectueusement.
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Ven Déc 02, 2016 20:17

Rebonjour

En fait, je n'aurai qu'une amp-lighbox ( pour l'interface contenant les formulaires ), et puis des <div> et <span> pour la ligne : "Personnaliser" et "Gestion des cookies".

Il y a deux problèmes :

1) Comment déclencher, en même temps que les <amp-form> , des modifications des classes css définissant les couleurs ?

Ajout : Je veux dire, modifier les noms des classes css affectées aux éléments html.

2) Est-il possible de déclencher un amp-form ( sans choix ), tout en faisant l'équivalent d'un "on:tap" ?

Merci beaucoup de vos réponses.

Amicalement.
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Sam Déc 03, 2016 9:56

Rebonjour

Est-ce que l'on peut ( en mode AMP ), déclencher un amp-form en faisant ( sur un<div> ):

Code: Tout sélectionner

  <div id="mon-div" on="tap:mon-form.submit;">

  </div>

  <form div="mon-form"
             method="post"
             action-xhr="https..."
             target="_blank">
      <input etc...
      <input type="submit">
  </form>




Je corrige.

Le submit est un event, pas une action.

Il faudrait donc déclencher les actions à partir du submit ( et non pas l'inverse ).

Donc :

Code: Tout sélectionner

  <div id="mon-div"
             layout:nodisplay>
   ...
  </div>

  <form div="mon-form"
             method="post"
             action-xhr="https..."
             target="_blank" on="submit-success.mon-div.open;">
      <input etc...
      <input type="submit">
  </form>



Mon problème serait de faire apparaître ou disparaître certains éléments d'interface au moment du submit.

Mais, ces éléments devraient être limités en surface, et pas surgissant. Exit les amp-ligthbox.

Quels balises HTML ( ou components AMP ) supportent l'action open ( ou close ) ?

Super merci pour vos réponses.

Respectueusement.
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Sam Déc 03, 2016 12:38

Bonjour

D'après la doc de Google, l'action "hide" est permise pour tous les éléments html :

---------------------------------------------------------------------------------------------------------
Globally defined Events and Actions

Currently AMP defines tap event globally that you can listen to on any HTML element (including amp-elements).

AMP also defines a hide action globally that you can trigger on any HTML element.

For example, the following is possible in AMP.


Code: Tout sélectionner

<div id="warning-message">Warning...</div>

<button on="tap:warning-message.hide">Cool, thanks!</button>



---------------------------------------------------------------------------------------------------------

C'est ok, mais quel est l'équivalent de "hide" pour faire apparaître la <div> au lieu de la cacher ?

C'est peut-être la dernière information dont j'ai besoin pour mettre au point ma version AMP de tarteaucitron.

Merci beaucoup de vos réponses.

Amicalement.
Haut
Messages: 2765

Enregistré le: 14 Aoû 2002

Message le Dim Déc 04, 2016 16:56

Bonjour

Pour ma version "full PHP AMP compliant" de tartecitron, j'aurais besoin de savoir cacher ou montrer un élément html ( classique ou amp component je ne sais pas ).

J'ai utilisé ci-dessous, l'event AMP : "tap:", qui d'après la documentation, peut s'appliquer à tout élément html ( même non AMP ), à un élément <div>, avec l'action "hide" ( également dans la doc ), qui permet effectivement de cacher la div.

Mon problème, est de trouver l'action ( contraire de hide ), qui appliqué à l'event "tap:" , qui permettait de remontrer la div.

L'action "hide" provoque ( d'après l'inspecteur de Chrome ) l'ajout de "display:none;" à l'élément cible.

Le problème, consiste à trouver une action acceptée par AMP ( et associée à "tap:" ) qui soit le contraire de "hide".

SI c'est possible, soit le display deviendrait le même qu'au départ, soit il serait spécifié dans l'action ( contraire de "hide" ).

Code: Tout sélectionner

<body>
<div id="mon-div1">
        Essai reussi.
</div>

<div id="mon-div2">
        <button on="tap:mon-div1.hide;" role="button" tabindex="0">
        Cacher.
        </button>
</div>

<div id="mon-div3">
        <button on="tap:mon-div1.;" role="button" tabindex="1">
        Montrer.
        </button>
</div>

</body>




Merci beaucoup pour vos réponses. :)

Respectueusement.
Modifié en dernier par ortolojf le Dim Déc 04, 2016 17:02, modifié 1 fois.
Haut
Messages: 140

Enregistré le: 17 Oct 2009

Message le Dim Déc 04, 2016 17:01

Regarde peut-être aussi du côté d'amp experiment :
https://ampbyexample.com/components/amp-experiment/

L'exemple de la page semble aller dans ton sens... mais chez moi je ne vois que du jaune...

Code: Tout sélectionner
  <style amp-custom>
    body[amp-x-button-color-experiment="yellow"] .button-color-experiment {
      background-color: yellow;
      color: black;
    }
    body[amp-x-button-color-experiment="red"] .button-color-experiment {
      background-color: red;
    }
    body[amp-x-button-color-experiment="blue"] .button-color-experiment {
      background-color: blue;
    }
    button {
      background-color: grey;
    }
  </style>
</head>
<body>
 <amp-experiment>
    <script type="application/json">
      {
        "button-color-experiment": {
          "variants": {
            "yellow": 30,
            "red": 30,
            "blue": 30
          }
        }
      }
    </script>
  </amp-experiment>
  <button class="button button-color-experiment">Click here</button>
Haut

Formation recommandée sur ce thème :

Formation SEO spéciale Wordpress : apprenez à optimiser le référencement naturel d'un site fait avec Wordpress... Formation Ranking Metrics animée par un expert SEO / Wordpress.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.