====== Chantier Responsive Design ======

Cette page vise à aborder plus spécifiquement les problématiques et les avancées qui ont été réalisées dans le but de migrer la documentation vers un template responsive. C'est à dire, pour les lecteurs non familiers de ce mot, que l'on souhaite que la manière dont la doc s'affiche s'adapte automatiquement en fonction de la taille de l'écran du lecteur, qu'il s'agisse d'un écran d'ordinateur extra large ou d'un téléphone portable.

Ce chantier est un préalable obligé à la mise en place de certaines nouvelles fonctionnalités très demandées comme l'onglet discussion et le WYSIWYG.

===== Equipe =====

L'équipe qui se charge de mener la réflexion et de procéder à la migration est composée de tous ceux qui voudront bien la rejoindre. Les supports à privilégier sont:
  * [[wiki:participer_wiki#communiquer_avec_les_autres_contributeurs|la liste diffusion et le salon de discussion]] des contributeurs du wiki
  * [[wiki:liste_discussion#coordination_des_sites_de_la_communaute_ubuntu_francophone|La mailing liste de coordination]] des sites de la communauté francophone
  * Le forum section [[https://forum.ubuntu-fr.org/viewforum.php?id=21|À propos du site - Contributions]]
Nous sommes peu nombreux, raisons pour laquelle ce sujet avance très lentement et nous manquons cruellement de personnes susceptibles de déployer la doc chez eux en local et de tester les différentes possibilités, donc quel que soit votre degré de compétence technique, si ce sujet vous intéresse, faites vous connaitre!

===== Les critères vers lesquels on veut tendre =====

Changer de template, c'est une chose, mais il reste ensuite à définir quel est le but que l'on veut atteindre, déterminer quels sont les éléments actuellement présents que l'on souhaite absolument conserver et ceux qui sont dispensables, arrêter les choix de couleur, etc.

Les discussions qui ont eu lieu entre admins, en lien avec la coordination des sites ubuntu-fr, et avec les utilisateurs ont permis de dégager les critères suivants:

  - Pour la couleur dominante on veut rester sur le orange, couleur historique de la distribution, et sachant que Canonical ne nous autorisera pas à exploiter l'aubergine, qui reste dédié à ses supports de communication officiels
  - Afin de pouvoir intégrer facilement des plugins Dokuwiki, il faut s'éloigner le moins possible du design par défaut (par exemple le très demandé plugin //discussion// qui s'adapte mal à des templates fantaisistes)
  - Du fait de l'absence de d'administrateur qui maitrise bien le php et qui puisse assurer un suivit à long terme, il a été décidé de faire au plus simple possible
  - On souhaite pouvoir conserver d'une manière ou d'une autre les liens actuellement présents dans le menu de gauche
  - Suivre autant que possible les préconisations de la page [[projets:design2011|Design 2011]]

===== Solution retenue =====

Il y a déjà eu 5 propositions de futurs designs:
  * Trois sont visibles ici: [[projets:design2011#en_cours_definir_la_mise_en_page|Définir la mise en page]]
  * Deux sont (étaient) visualisables via des démo en ligne: [[http://ubuntu.dahwa.fr/|Cytheria]] et Yoboy

Avec l'équipe d'administrateur de la doc et au vu des critères énoncés précédemment, il a été décidé de partir sur la proposition de Yoboy, dont voici une capture d'écran:

{{ :wiki:maquette_design2018_yoboy.png?nolink |}}


Il s'agit d'une installation par défaut de Dokuwiki, avec le [[https://www.dokuwiki.org/template:bootstrap3|template bootstrap3]] et le [[https://bootswatch.com/united/|thème united]]. Il est déjà très proche de ce que l'on souhaiterai, moyennant de fignoler un petit peu les détails au niveau notamment du logo et de la feuille de style.

<note>A propos de la disparition de la barre de menu de gauche: Cette évolution était nécessaire pour avoir un affichage correct sur les mobiles et par ce que cette barre de menue était conflictuelle avec certains plugins que nous souhaiterions intégrer (dont le plugin discussion). Néanmoins on n'a pas abandonné le sujet, il y a des réflexions qui sont en cours pour la réintégrer dans le futur d'une manière ou d'une autre.

En attendant les fonctionnalités correspondantes sont disponibles soit via les icones de la barre de raccourcis de droite, soit via le menu déroulant accessible dans la barre du haut (icône clé plate)</note>

=== Cas des variantes ===
A ce jour, les variantes principales [[https://doc.kubuntu-fr.org/kubuntu|Kubuntu]], [[https://doc.xubuntu-fr.org/xubuntu|Xubuntu]], [[https://doc.edubuntu-fr.org/edubuntu|Edubuntu]] possèdent des thèmes qui leur sont propres, mais nous n'avons pas de statistiques sur l'usage qui en est fait. Il n'est pas prévu de maintenir le mécanisme actuel, qui demanderait qu'un développeur s'y colle, et qui pose problème au niveau du certificat de sécurité. Mais il est envisagé en revanche de proposer aux utilisateurs qui le souhaitent d'activer un thème alternatif. Plusieurs possibilités existent pour ce faire:
  * Le plus simple serait d'activer le thème switcher prévu par le thème choisi, et qui permet de choisir parmi une dizaine de possibilités, l'inconvénient principal étant qu'aucune n'a de parenté flagrante avec les couleurs d'une variante en particulier.
  * Une variation de la proposition précédente serait que quelqu'un s'occuppe de proposer un thème pour chaque variante officielle en reprenant ses couleurs habituelles. Ce n'est pas très compliqué à faire dans la mesure où il est possible de partir d'une variante existante et de la modifier, mais ça requiert quand même de comprendre un peu le CSS (et idéalement less css)
  * Alternativement une  extension [[https://userstyles.org/|Stylish]] pourrait permettre aux utilisateurs d'effectuer la personnalisation de leur choix et on aura besoin que quelqu'un publie sa feuille de style pour la partager aux autres

===== Reste à faire =====

Pour faire avancer ce chantier, nous avons besoin:
  * de retours par rapport au [[http://doc.ufr.yoboy.fr/|serveur de démo]] (attention il ne contient pas toute la doc et tout n'est pas forcément à jour dessus).
  * de personnes qui installent la doc chez eux et fassent des tests en local (contactez nous sur notre [[wiki:participer_wiki#le_salon_de_discussion|salon de discussion]] et on vous guidera).
  * de propositions de thèmes alternatifs pour les gens qui sont fans d'une autre variante (Kubuntu, Xubuntu..)

==== Modification CSS ====

Si vous n'y connaissez rien en CSS, vous pouvez bien évidemment nous décrire ce que vous avez en tête. Mais sinon le plus simple est que vous ouvriez la console développeur de votre navigateur (touche F12), et que vous meniez vos propres expériences. Vous pourrez ensuite nous communiquer vos capture d'écran et le code correspondant.

===== Problèmes connus du futur thème =====

Cette section vise à recenser la liste des problèmes qui ont été trouvés sur le [[http://doc.ufr.yoboy.fr/|serveur de démo]] (pour rappel, la doc n'y est pas complète ni à jour).
  * <del>Le symbole d'Ubuntu du nouveau thème utilise des polices système et ne s'affiche donc pas depuis Windows</del>
  * <del>Le message à propos des cookies a besoin d'être personnalisé</del> FIXME créer la page [[:cookie:banner]] et mettre le texte dedans.
  * Les liens externes ne devraient pas être de la même couleur que les liens internes
  * Le contraste dans les blocs de code est perfectible
  * Le mini dock de droite est pénible à l'usage, il a été suggéré de désactiver les effets de zoom au survol et d'afficher directement les icônes en taille plus grande
  * Il faudrait homogénéiser les tailles/marges des pictos des notes

<note tip>Le développement du nouveau design a été fait de manière transparente avec de nombreux appels aux bonnes volontés de la communauté. De ce fait les demandes impliquant de modifier profondément ce qui a été fait ne seront pas retenues pour ce chantier. Mais n'hésitez pas à nous faire par de vos doléances et on fera le maximum pour les intégrer dans une évolution future</note>

<note help>Afin de répondre à toutes les remarques qui nous ont été faites sur l'utilisation de Google comme moteur de recherche de la doc, il a été décidé de faire pointer dorénavant la recherche sur le formulaire du forum, avec pour but d'homogénéiser le comportement du site. Il est donc normal que les recherches sur le serveur de démo aboutissent sur celui de production</note>
===== Mise en place d'un test en local =====

Ce paragraphe s'adresse à ceux qui voudraient nous aider en déployant une version de la documentation en local sur leur ordinateur. Le process global parait assez simple, il suffit pour commencer d'installer php et dokuwiki, puis suivant votre but:

==== Pour installer l'actuelle version de la doc ====
  - Privilégier la version 5 de php. 
  - récupérer le code ubuntu-fr-doc sur le repo git
  - (optionnel) décompresser le dossier data.tar.gz (demander un lien de téléchargement sur la liste)

En pratique c'est un peu plus compliqué que ça, mais des pages ont été créées pour s'y retrouver:
  * [[groupes:ubuntu-fr-webteam:tester_les_outils#la_documentation|Tutoriel général]] (et un peu vieux)
  * [[utilisateurs:fabux:brouillons:ikiwllatsinubfr|Installation complète de la documentation ubuntu-fr en local]]


==== Pour prospecter sur la future version ====
Dans ce cas le plus simple est de partir de la dernière version de dokuwiki et de voir comment le personnaliser pour correspondre à nos besoins. Sachant que pour rappel, il a été décidé d'utiliser le [[https://www.dokuwiki.org/template:bootstrap3|template bootstrap3]] et le [[https://bootswatch.com/united/|thème united]], et d'en rajouter une couche la plus fine possible afin de correspondre à nos besoins. Vous pouvez aussi nous contacter sur notre [[wiki:participer_wiki#le_salon_de_discussion|salon de discussion]] pour qu'on vous indique quelle est la branche à partir de laquelle on travaille actuellement