396 lines
16 KiB
HTML
396 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
|
||
<link rel="canonical" href="https://framagit.org/framasoft/framadate/funky-framadate-front/reunions/2019_08_09/">
|
||
<link rel="shortcut icon" href="../../img/favicon.ico">
|
||
<title>20190809 - Funky Framadate Front end</title>
|
||
<link href="../../css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="../../css/font-awesome.min.css" rel="stylesheet">
|
||
<link href="../../css/base.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css">
|
||
|
||
<script src="../../js/jquery-1.10.2.min.js" defer></script>
|
||
<script src="../../js/bootstrap.min.js" defer></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
|
||
<script>hljs.initHighlightingOnLoad();</script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="../..">Funky Framadate Front end</a>
|
||
<!-- Expander button -->
|
||
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
|
||
<!-- Expanded navigation -->
|
||
<div id="navbar-collapse" class="navbar-collapse collapse">
|
||
<!-- Main navigation -->
|
||
<ul class="nav navbar-nav">
|
||
<li class="dropdown">
|
||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Accueil <b class="caret"></b></a>
|
||
<ul class="dropdown-menu">
|
||
|
||
<li>
|
||
<a href="../../index.fr/" class="dropdown-item">Framadate - funky version</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="../../TODO/" class="dropdown-item">en cours</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Guide utilisateur <b class="caret"></b></a>
|
||
<ul class="dropdown-menu">
|
||
|
||
<li>
|
||
<a href="../../user-guide/" class="dropdown-item">Guide utilisateur</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="../../LICENCE.md" class="dropdown-item">None</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Guide administrateur <b class="caret"></b></a>
|
||
<ul class="dropdown-menu">
|
||
|
||
<li>
|
||
<a href="../../changelog/" class="dropdown-item">Changelog</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Guide développeur <b class="caret"></b></a>
|
||
<ul class="dropdown-menu">
|
||
|
||
<li>
|
||
<a href="../../GETTING_STARTED/" class="dropdown-item">Démarrer</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="../../customisation/" class="dropdown-item">Personnaliser</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="../../cadrage/accessibility/" class="dropdown-item">Accessibilité</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="../../cadrage/architecture/" class="dropdown-item">Architecture</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="../../dev-guide/CONTRIBUTE/" class="dropdown-item">Contribuer</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="../../angular/" class="dropdown-item">Angular</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="../../cadrage/i18n/" class="dropdown-item">Traduction</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown active">
|
||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Historique <b class="caret"></b></a>
|
||
<ul class="dropdown-menu">
|
||
|
||
<li>
|
||
<a href="../../history.md" class="dropdown-item">Historique</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="../../cadrage/specifications-fonctionnelles/" class="dropdown-item">Spécifications</a>
|
||
</li>
|
||
|
||
<li class="dropdown-submenu">
|
||
<a href="#" class="dropdown-item">Réunions</a>
|
||
<ul class="dropdown-menu">
|
||
|
||
<li>
|
||
<a href="../0_blank_notes/" class="dropdown-item">Modèle vierge</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="../2020_08_09/" class="dropdown-item">20200809</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="./" class="dropdown-item active">20190809</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
<ul class="nav navbar-nav ml-auto">
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link" data-toggle="modal" data-target="#mkdocs_search_modal">
|
||
<i class="fa fa-search"></i> Search
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a rel="prev" href="../2020_08_09/" class="nav-link">
|
||
<i class="fa fa-arrow-left"></i> Previous
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a rel="next" class="nav-link disabled">
|
||
Next <i class="fa fa-arrow-right"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-3"><div class="navbar-light navbar-expand-md bs-sidebar hidden-print affix" role="complementary">
|
||
<div class="navbar-header">
|
||
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#toc-collapse" title="Table of Contents">
|
||
<span class="fa fa-angle-down"></span>
|
||
</button>
|
||
</div>
|
||
|
||
|
||
<div id="toc-collapse" class="navbar-collapse collapse card bg-secondary">
|
||
<ul class="nav flex-column">
|
||
|
||
<li class="nav-item" data-level="1"><a href="#notes-du-982019-avec-mumble" class="nav-link">notes du 9/8/2019 avec Mumble</a>
|
||
<ul class="nav flex-column">
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="nav-item" data-level="1"><a href="#questions-notees-par-come" class="nav-link">Questions notées par Come.</a>
|
||
<ul class="nav flex-column">
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div></div>
|
||
<div class="col-md-9" role="main">
|
||
|
||
<ul>
|
||
<li class="i18n-link i18n-link-not-found i18n-link-en">English: This page isn't translated to English.</li>
|
||
</ul>
|
||
<h1 id="notes-du-982019-avec-mumble">notes du 9/8/2019 avec Mumble</h1>
|
||
<p>À discuter :</p>
|
||
<pre><code>discussion via framatalk ? plutôt mumble !
|
||
|
||
Se connecter à mumble.tcit.fr. Il n'a pas de mot de passe et il y a un salon Framadate ouvert.
|
||
|
||
|
||
qui peut/veut faire quoi ?
|
||
|
||
tykayn: dev front end, JS & styles
|
||
|
||
newick : intégrateur dans la vraie vie
|
||
|
||
llaq : plutôt HTML
|
||
|
||
talone : plutôt coté JS
|
||
|
||
|
||
on ne s'occupe toujours que du front ?
|
||
|
||
[newick] Est-ce que tout le monde est ok sur le fait de faire que le front et pas tout ?
|
||
|
||
llaq : pas de souci avec le back, donc pourquoi le changer ?
|
||
|
||
Ok on y touche pas
|
||
|
||
|
||
repartir de 0 ?
|
||
|
||
Je parle de funky framadate
|
||
|
||
llaq : Pourquoi pas recommencer car c'est bien différent des maquettes
|
||
|
||
newick : On est toujours en mode "MVP", on fait ça pour tester les maquettes et ensuite seulement on le connecte au back-end ?
|
||
|
||
maiwann : Ouip tant que ça reste cohérent niveau expérience de l'utilisateur
|
||
|
||
newick : C'est plutot coté JS qu'il faut voir… talone ?
|
||
|
||
Talone : on peut faire des choses, je maitrise pas php
|
||
|
||
llaq : moi non plus
|
||
|
||
talone : il y a des contributeurices de framadate ici ?
|
||
|
||
maiwann : nope :x
|
||
|
||
newick : on peut avancer comme ça, surtout sur le front et ensuite on verra le back ?
|
||
|
||
talone & llaq : oui on peut faire ça
|
||
</code></pre>
|
||
<p>[tentative de tykayn de nous rejoindre]</p>
|
||
<pre><code>pourquoi y'a des pages php dans le dossier front end ?
|
||
|
||
newick : C'est dans le dossier principal, pas dans funky
|
||
|
||
maiwann : donc a priori rien d'obligatoire ?
|
||
|
||
|
||
API de backend existe t elle?
|
||
|
||
llaq : nope ^_^
|
||
|
||
|
||
|
||
|
||
Sass, css, autre ?
|
||
|
||
https://css2sass.herokuapp.com/ pour convertir le css actuel vers du sass
|
||
|
||
|
||
|
||
|
||
intérêt de Bootstrap / frameworks ?
|
||
|
||
Angular cli pour se concentrer sur des composants front end
|
||
|
||
Boostrap a priori c'est pas forcément nécessaire, newick assez à l'aise pour ne pas en avoir besoin dans HTML / CSS
|
||
|
||
Composants <3 Atomic design <3
|
||
|
||
tykayn : propose de faire une démo
|
||
|
||
(Beaucoup de discussion sur les framework front, j'ai pas tout compris ce qu'il se passait donc mes notes sont très limitées !)
|
||
|
||
En gros, on fait du Angular et chacun intègre son truc indépendamment
|
||
</code></pre>
|
||
<p>Invitation sur funkyframadate, on repart de 0 !
|
||
La suite
|
||
remplissons le wiki et les board d'issues
|
||
on zieute la démo et on voit ce qu'on fait ensuite</p>
|
||
<hr />
|
||
<h1 id="questions-notees-par-come">Questions notées par Come.</h1>
|
||
<p>Suite au visionnage de la vidéo de présentation de maiwann (Framadate_Presentation_maquettes.flv), des questions ont été levées :</p>
|
||
<ul>
|
||
<li>Quel est l'intérêt de différentier les dates limites de modification et vote ? Pourquoi appelle-t-on cela archivage ?</li>
|
||
<li>Peut-on écrire plus explicitement que le nom du créateur, s'il est renseigné, est affiché à ceux qui répondent ?</li>
|
||
<li>Lors de la validation du vote, peut-on mettre davantage en avant l'importance de l'URL d'édition afin d'éviter la fermeture machinale (par réflexe) du popup ?</li>
|
||
<li>Pour la vue des réponses, pourquoi ne pas mettre pour tous les utilisateurs les petites icônes actuellement réservées aux daltoniens ? On économiserait alors un champ.</li>
|
||
<li>
|
||
<p>Quitte à faire la chasse aux clics, pour les menus déroulants à deux options (du type « je veux » / « je ne veux pas ») qui nécessitent deux clics pour commuter, pourquoi pas une commutation en un clic ; comme une check-box mais avec du texte à la place du check ? Bien-sûr, ceci à condition que les champs conditionnels ne soient pas vidés lorsqu'ils disparaissent.</p>
|
||
</li>
|
||
<li>
|
||
<p>Y a-t-il des champs obligatoires ? Si oui, comment les matérialiser ?</p>
|
||
</li>
|
||
<li>En cas d'erreur à la validation du formulaire (pour cause de champ vide ou format incorrect par exemple), on affiche systématiquement le message d'erreur en orange (cf. écran sondage_date_intervalle) en dessous du champ concerné ?</li>
|
||
<li>Quel est l'état de focus sur les champs ? Celui par défaut du navigateur ?</li>
|
||
<li>Étant donné qu'il y a plusieurs étapes dans la création du sondage, ne faudrait-il pas les indiquer au début de la page ? Ex : 1/3, 2/3, 3/3 (je tire ça des bonnes pratiques opquast)</li>
|
||
<li>Dans le récapitulatif à la fin, pourquoi ne rappelle-t-on pas également le titre et la description du sondage créé ?</li>
|
||
</ul>
|
||
<p>Les boutons :</p>
|
||
<ul>
|
||
<li>
|
||
<p>Quel est l'état de focus sur les boutons ?</p>
|
||
</li>
|
||
<li>
|
||
<p>Sur l'écran « Mot de passe », le bouton « Voir » est-il immédiatement actif ou on attend d'avoir tapé la première lettre ? Une fois qu'on a cliqué sur « Voir », est-ce que le contenu du bouton devient « Masquer » ?</p>
|
||
</li>
|
||
<li>
|
||
<p>Dans ta vidéo tu précises que le popup pour ajouter l'intervalle de dates se situe en dessous du calendrier pour qu'on puisse voir les dates préalablement sélectionnées, mais je pense que sur mobile ça va être compliqué : ça signifierait que le popup se situe très bas dans l'écran, il n'y aurait que le titre visible sur les téléphones de petite taille.</p>
|
||
</li>
|
||
<li>
|
||
<p>Dans les écrans de réponse au sondage date, quelle est la règle pour l'abbréviation des dates ? Des fois c'est le jour qui est abrégé, des fois le mois.</p>
|
||
</li>
|
||
<li>
|
||
<p>On part sur une version desktop à partir de 768px ? Je demande, car tes maquettes desktop font 602 px de large et je ne sais pas si c'est délibéré ou non.</p>
|
||
</li>
|
||
</ul></div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="col-md-12">
|
||
<hr>
|
||
<p>Documentation built with <a href="https://www.mkdocs.org/">MkDocs</a>.</p>
|
||
</footer>
|
||
<script>
|
||
var base_url = "../..",
|
||
shortcuts = {"help": 191, "next": 78, "previous": 80, "search": 83};
|
||
</script>
|
||
<script src="../../js/base.js" defer></script>
|
||
<script src="../../search/main.js" defer></script>
|
||
|
||
<div class="modal" id="mkdocs_search_modal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h4 class="modal-title" id="searchModalLabel">Search</h4>
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>
|
||
From here you can search these documents. Enter
|
||
your search terms below.
|
||
</p>
|
||
<form>
|
||
<div class="form-group">
|
||
<input type="search" class="form-control" placeholder="Search..." id="mkdocs-search-query" title="Type search term here">
|
||
</div>
|
||
</form>
|
||
<div id="mkdocs-search-results"></div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><div class="modal" id="mkdocs_keyboard_modal" tabindex="-1" role="dialog" aria-labelledby="keyboardModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h4 class="modal-title" id="keyboardModalLabel">Keyboard Shortcuts</h4>
|
||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 20%;">Keys</th>
|
||
<th>Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="help shortcut"><kbd>?</kbd></td>
|
||
<td>Open this help</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="next shortcut"><kbd>n</kbd></td>
|
||
<td>Next page</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="prev shortcut"><kbd>p</kbd></td>
|
||
<td>Previous page</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="search shortcut"><kbd>s</kbd></td>
|
||
<td>Search</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="modal-footer">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|