refonte du site / nouveau design

krodelabestiole · Le 09/12/2020, à 15:18

en attendant la sortie de flarum stable pour migrer le forum (ce qui sera un gros morceau), j'ai développé un gabarit général pour le site ubuntu-fr.

les sources sont dispo là, et une démo est visible ici plutôt en intégration continue ICI.

c'est responsive (ça fonctionne aussi bien sur smartphone, tablette ou écran géant)
et il y a deux thèmes (light et dark)

je poste ici pour prendre la température générale.

pour info, la conversation équivalente sur la liste de discussion du wiki est ici : https://listes.ubuntu-fr.org//arc/ubunt … 00005.html
(il faut malheureusement avoir un compte pour la consulter)

guide de style sommaire : https://ubuntu-fr.gitlab.io/code/ufr-cms/guide/

Dernière modification par krodelabestiole (Le 09/01/2021, à 13:09)

Vobul · Le 09/12/2020, à 15:43

T'as vraiment posté un lien "ubuntu.localhost" ???

Dernière modification par Vobul (Le 09/12/2020, à 15:44)

krodelabestiole · Le 09/12/2020, à 15:48

aargh et ça fait bientôt 8 fois que je fais la connerie ^^ merci

krodelabestiole · Le 10/12/2020, à 19:49

update : ajout de la page d'accueil

https://ubuntu-fr.crachecode.net/main-layout/

// EDIT : lien obsolète, la page d'accueil est là maintenant https://ubuntu-fr.gitlab.io/code/ufr-cms/

Dernière modification par krodelabestiole (Le 09/01/2021, à 13:07)

krodelabestiole · Le 17/12/2020, à 06:51

la démo passe en intégration continue sur gitlab pages : https://ubuntu-fr.gitlab.io/code/ufr-main-layout/
(toutes les modifs sont visibles dès qu'elles sont poussées)

// EDIT : obsolète aussi

Dernière modification par krodelabestiole (Le 09/01/2021, à 13:08)

lool_lauris · Le 17/12/2020, à 13:44

Salut,

Merci pour le partage et bravo pour cette nouvelle initiative.

Personnellement, j'adore le look, je le trouve très moderne et très dans l'esprit "Ubuntu". Il y avait eu une précédente proposition de refonte du site qui avait tourné court (tout a été supprimé sur github). J'avais moins aimé cette 1ère proposition mais je ne veux surtout pas critiquer ce précédent gros travail qui avait été fait, proposé et amendé en fonction des "critiques" - positives pour certaines - qui n'avaient pas manquées d'être soumises.

J'espère que ce projet aura une issue favorable !

krodelabestiole · Le 18/12/2020, à 03:40

ah oui, merci d'avoir retrouvé ce sujet !

effectivement il semblerait que Toulibre soit parti en claquant la porte, c'est dommage, j'espère que c'est pas à cause de moi, j'avais pas été tendre avec lui. En même temps j'essayais de le prévenir qu'étant débutant ça allait être très compliqué pour lui de tenir cette proposition.
c'est aussi évidemment dommage qu'il ait supprimé son projet, qui était plein de bonnes idées en particulier niveau contenu éditorial (parce que pour le moment quand on cherche des infos sur ubuntu on tombe sur un t-shirt à vendre...).

mais oui, il était vraiment débutant et ce n'est pas du tout un projet qui puisse servir à se former. c'est comme quand on prend un stagiaire, dans un premier temps on passe beaucoup plus de temps à lui expliquer des choses qu'à les faire soi-même ce qui est très frustrant en particulier pour un projet bénévole auquel on a peu de temps à consacrer (et perso j'avais pas du tout envie de me lancer dans ce qui pourrait s'appeler une formation particulière non rémunérée). et évidemment, on va pas le faire bosser sur un projet central. donc bref, de mon point de vue c'était malheureusement un projet voué à l'échec. si ça peut rassurer perso j'ai bientôt 20 piges d'expérience pro en développement web, et mon but est de partir sur des bases saines et simples : je m'interdis les préprocesseurs (sass, postcss, typescript, webpack...), j'utilise seulement du CSS et du JS purs pour que n'importe qui puisse maintenir le code sans tout le background d'un professionnel.

et merci pour ce rappel, beaucoup de choses intéressantes ont été échangées sur ces 32 pages, dont certaines que j'avais à moitié oublié, je vais essayer de les extraire ici :

Aldian a écrit :

A part ça historiquement il y avait une mailing list pour discuter des évolutions du site web. Bon ça fait bien trois ans que personne à part moi (pour le nouveau design de la doc) n'a posté de nouveau message, mais ça peut être une porte où toquer pour avoir du répondant..

alors cette page, il faut que je la garde sous le coude.
et surtout qu'un admin la mette à jour si besoin (dernière mise à jour significative en 2011).

Aldian a écrit :

Pour commencer, il semblerait que la page d'accueil actuelle soit un drupal. Le projet Lauchpad correspondant est celui-ci: https://launchpad.net/ubuntu-fr-www
Pour moi ça me parait logique que la page d'accueil soit basée sur un CMS, dans la mesure où elle a besoin d'être mise à jour régulièrement, lorsqu'une nouvelle version d'Ubuntu sort ou en fonction de l'actualité du moment. Car il est hors de question de devoir commiter une modification du code source à chaque nouvelle actualité. Cela signifie qu'il est très important de différencier le fond de la forme.

krodelabestiole a écrit :

Aldian a écrit :
selon moi, une bonne manière de faire serait de travailler dans une premier temps avec du Lorem Ipsum pendant qu'on choisit les détails de forme, et une fois que la forme est définitivement arrêtée, on peut se préoccuper du fond
je dirais même qu'une bonne manière de faire serait de commencer par définir la charte graphique et le guide de style communs à l'ensemble du site ubuntu-fr.org (accueil, blog, doc, forum).

note : visiblement j'ai skippé l'étape guide de style. pour moi ça va aussi vite de proposer une page direct HTML / CSS qu'un mockup avec un éditeur graphique. Donc on va dire que le guide de style est là pour le moment : https://ubuntu-fr.gitlab.io/code/ufr-ma … forum.html
mais il n'y a même plus besoin de s'y référer (en matière de web en tout cas), vu que les styles sont définis globalement dans un fichier CSS qui doit rester commun à toute les plates-formes (dokuwiki / flarum / CMS). c'est l'essence du projet main-layout.

krodelabestiole a écrit :

Aldian a écrit :
sauf que ce que l'on écrit dans la page ne doit pas être dans le code source, ça doit être géré par le moteur de CMS (drupal, donc, dans notre cas).
à voir. on peut aussi utiliser un générateur de site statique, mais c'est vrai que c'est généralement un peu plus compliqué à maintenir.
en tout cas drupal est plutôt lent et lourd, un CMS flat file (sans base de données) me parait plus indiqué en l'occurrence. (la priorité sur une page d'accueil c'est la rapidité d'affichage, qui économise au passage des ressources serveurs)
il y a une raison particulière pour le choix de drupal ? drupal affiche d'autres pages que la page d'accueil ? j'ai l'impression que tous les liens amènent vers d'autres sites.
et pour une bête page d'accueil drupal c'est un tractopelle pour cueillir une marguerite...

Aldian a écrit :

Je crois que le choix de drupal est historique. La page d'accueil doit dater de 2006 ou 2007. A l'époque il y avait moins d'alternatives. Probablement que la personne qui a lancé le truc a utilisé l'outil avec lequel elle était le plus familière. Pour moi la seule contrainte qui subsiste aujourd'hui, c'est que l'édition du contenu devrait être possible par un non informaticien, et idéalement avec du WYSIWYG. Mais j'espère que les personnes qui s'occupent actuellement de la maintenance de cette page nous en diront plus.

Aldian a écrit :

Concernant la problématique CMS/pas CMS, drupal/pas drupal, je vais être pragmatique et dire que dans l'absolu on s'en fout. Par contre dans l'idéal il faudrait qu'un non informaticien puisse éditer le contenu facilement et sans qu'il faille pusher/merger le code source derrière. La stratégie habituelle vis à vis de cette problématique c'est d'utiliser un CMS, mais après s'il y a une alternative moderne et légère pourquoi pas...

Dernière modification par krodelabestiole (Le 18/12/2020, à 04:23)

krodelabestiole · Le 18/12/2020, à 03:44

je poste tout ça parce que je suis d'avis de 2 choses :

- modifier le menu : planet est abandonné, il faut clairement garder documentation et forum, éventuellement accueil, mais on pourrait aussi ajouter un télécharger, et un à propos ne serait pas du luxe...

- virer drupal, qui n'a aucun sens pour un projet de cette dimension, et le remplacer par quelque chose de beaucoup plus léger. je vais faire un tour de ce qui existe en générateur de site statique avec administration graphique, ou éventuellemet CMS flat file.

lool_lauris · Le 18/12/2020, à 11:15

Merci pour toutes ces infos.

PS : Tu ne devrais pas négliger la majuscule de début de phrase, ça facilite grandement la lecture.

alt.G · Le 18/12/2020, à 12:02

Je m'abonne à ce fil, j'ai déjà fait un retour sur la liste.

kookie68 · Le 18/12/2020, à 12:24

Très bien le projet. Je vais suivre ça de près. Ca serait bien, à la place de Planet, de rajouter un onglet liens vers des ressources externes, de préférence francophones, et qui ne soient pas forcément liées à des distributions précises. Genre Linuxfr.org.
Bonnes fêtes à tous (pardon, à toutzétous pour suivre la tendance novlangue !)

bruno · Le 18/12/2020, à 13:08

Bravo pour ce travail et surtout pour tes choix techniques pertinents.

cqfd93 · Le 18/12/2020, à 13:33

Salut !

krodelabestiole a écrit :

en attendant la sortie de flarum stable pour migrer le forum (ce qui sera un gros morceau), j'ai développé un gabarit général pour le site ubuntu-fr.
les sources sont dispo là, et une démo est visible ici plutôt en intégration continue ICI.
c'est responsive (ça fonctionne aussi bien sur smartphone, tablette ou écran géant)
et il y a deux thèmes (light et dark)

Ah c'est chouette !!! Et le thème dark est vraiment reposant. Merci pour le boulot.

ylag · Le 18/12/2020, à 13:41

Bonjour,

Juste pour ajouter mes remerciements pour ce beau boulot...

...et JOYEUSES FÊTES à toutes et tous!!!

A+

DRbuntu91 · Le 18/12/2020, à 15:59

@krodelabestiole
Tout d'abord un grand bravo pour cette belle initiative!
Mes compétences en "ergonomie" sont très très limitées alors je crains que mes retours ne vont pas être très utile.
Jusqu’à maintenant je accommodais bien du layout actuel (bah oui on prend ses petites habitudes...) sauf quand je devais faire une recherche sur mon smartphone (mais ça ne m’arrive que une ou deux fois par an donc pas si grave). Je n'ai pas de tablette donc je ne pourrai pas en parler.
Et la j'avoue que ce nouveau layout il est génial sur smartphone!
Bon pour le moment je n'ai testé que la navigation de la partie "documentation". J'attends avec impatience de voir la table de matière du forum (c'est ce que je consulte le plus souvent)
Encore bravo et merci.

ares · Le 18/12/2020, à 17:29

@krodelabestiole

Grand merci à toi pour cette initiative.
On peut enfin visualiser le site sur smartphone
Sans doute idiot pour certains mais pas pour d'autres !

Bon courage pour la suite.

Dernière modification par ares (Le 18/12/2020, à 17:30)

krodelabestiole · Le 19/12/2020, à 08:33

je suis en train de mettre en place un truc pour remplacer drupal.

- une page accueil un peu rigide (côté édition) mais élégante (on va essayer) et que des rédacteurs qui n'y connaissent rien en code html puissent quand même mettre à jour
- une page news (si on a un mot en français aussi court et éloquent je prends, mais là tout de suite je vois pas) pour les billets de blog genre nouveau t-shirt
- une page à propos d'édition complètement libre (on peut poster du texte, des images, des iframes...)

au passage j'ai trouvé cette capture de fabux qui montre un peu le boulot de Toulibre (sur mobile mais ça donne une idée du contenu) :

^ EDIT : ce projet est pas de moi et il a été abandonné (je le poste juste pour info)

j'aime bien que l'accueil soit réservé à une présentation d'ubuntu, avec un lien pour le télécharger. on pourrait faire une section comme ça, puis une section avec une présentation en grille (je dessine pas les grilles, hein !) des autres variantes officielles les plus populaires :

en gros dans mon idée la page ressemblerait à un truc comme ça en vachement simplifié (et peut-être pas toutes les variantes), avec des boutons pour envoyer sur les plateformes de téléchargement.

Dernière modification par krodelabestiole (Le 19/12/2020, à 20:43)

abecidofugy · Le 19/12/2020, à 12:33

@krodelabestiole : bravo et merci, enfin du neuf pour Ubuntu-fr ^^

Yeah !

ares · Le 19/12/2020, à 13:06

@krodelabestiole

J'ai effacé ma réponse, car il y avait confusion.

Voir, la réponse ci-dessous

Dernière modification par ares (Le 19/12/2020, à 16:45)

krodelabestiole · Le 19/12/2020, à 13:13

heu désolé j'aurais peut-être pas dû poster cette image, ou être plus clair : elle correspond pas du tout à ma proposition, c'était celle d'un contributeur précédent, qui a quitté le navire.

ma proposition de page d'accueil arrive bientôt et je proposerai un contenu mais il sera de toute façon éditable pas les rédacteurs du site.

krodelabestiole · Le 22/12/2020, à 03:29

ça avance !

j'ai créé plein de dépôts : https://gitlab.com/ubuntu-fr/code

ufr-cms :
j'ai mis en place un générateur de site statique (hugo), avec une interface d'administration graphique (Netlify CMS).
le contenu s'édite les doigts dans le nez (beaucoup plus simple que wordpress) et le résultat est la home sur laquelle je suis en train de travailler : https://ubuntu-fr.gitlab.io/code/ufr-cms/
(et toute les modifs du contenu sont versionnées sur gitlab de manière transparente)
et donc ultra sécu (repose sur l'auth de gitlab) et ultra léger / rapide (le serveur n'a qu'à mettre à disposition du html déjà rendu).

on bosse aussi sur le thème dokuwiki avec Nuliel : ufr-dokuwiki-theme
là je peux pas vous montrer pour l'instant il faudrait mettre en place un serveur de test PHP (je vais sûrement faire ça vite fait bientôt)

// EDIT :
c'est là : https://ufr-doc.crachecode.net/wordpress
j'ai modifié tous les menus pour qu'on reste sur les occurrences de dev des plateformes (on est vraiment sur dokuwiki et hugo).
Nuliel a fait une page de test https://ufr-doc.crachecode.net/page_test y a encore 2 3 trucs à corriger mais dans l'ensemble ça se passe plutôt bien !

et pour ceux qui voudraient participer, il faut quand même de bonnes connaissances en HTML et CSS, éventuellement PHP voir JavaScript, mais l'installation d'environnement de développement est ultra-facile !
voir ufr-cms et ufr-doc

quand on aura fini ces 2 trucs je ferai la même chose pour flarum.

Dernière modification par krodelabestiole (Le 22/12/2020, à 05:45)

cris22 · Le 22/12/2020, à 16:36

Je n'y connaît rien, mais bravo et merci pour votre travaille, investissement.

krodelabestiole · Le 05/01/2021, à 20:14

j'ai quasi terminé (pour tout ce qui concerne le CMS et le thème dokuwiki), il reste à mettre en place une visionneuse d'image et optimiser 2 - 3 trucs.
(et on refait aussi la page de téléchargement avec Nuliel)
https://ubuntu-fr.gitlab.io/code/ufr-cms/

si des personnes sont motivées pour donner un coup de main sans rien y connaître en développement web, vous pouvez aider sur 2 trucs :

pour cette page d'accueil j'aurais besoin de screenshots uniformisés.
il faudrait donc les captures des différentes variantes :
- au format png
- des systèmes en français
- dernières versions LTS (20.04)
- avec les réglages par défaut à l'installation
- résolution du bureau (et donc de la capture) en 720p (1280x720px)
- avec le menu des applications ouvert (sauf pour GNOME), ainsi qu'une fenêtre du gestionnaire de fichier (qui prenne pas tout l'écran)
(je suppose )
vous pouvez envoyer les fichiers sur https://nextcloud.crachecode.net/index. … eq4j594P5Q
(essayez de les nommer avec le nom de la variantes pour que les autres utilisateurs puissent voir ce qui a déjà été fait)

et ça serait bien aussi d'avancer sur le contenu éditorial. je me suis occupé de l'accueil, si il y a des avis sur ce contenu je prends, mais il faudrait aussi peupler les pages
- à propos https://ubuntu-fr.gitlab.io/code/ufr-cms/about/
- et mentions légales https://ubuntu-fr.gitlab.io/code/ufr-cms/disclaimer/

j'ai demandé pour savoir qui s'occupait du contenu éditorial du site, mais aucune nouvelle, donc je propose de mettre en place des framapads pour qu'on édite ça un peu tous ensemble :
https://bimestriel.framapad.org/p/ufr-apropos?lang=fr (à propos)
https://bimestriel.framapad.org/p/ufr-mentions?lang=fr (mentions légales)

merci

Dernière modification par krodelabestiole (Le 06/01/2021, à 19:31)

krodelabestiole · Le 06/01/2021, à 18:09

c'est fait pour les screenshots, un grand merci @Benoit (sur la ML du wiki)

krodelabestiole · Le 07/01/2021, à 01:23

allez, je me lance des fleurs !

scores lighthouse de la nouvelle page d'accueil :
- performance 90 (1.3s à 3.6s pour afficher le contenu)
- accessibilité 95
- bonnes pratiques 93
- référencement 92
(sur 100)

ancienne page :
- performance 63 (1.4s à 8.6s pour afficher le contenu)
- accessibilité 71
- bonnes pratiques 79
- référencement 58

le seul moyen d'augmenter encore les perfs serait de servir les images en webp (elles sont déjà servies en différentes tailles en fonction des écrans) mais hugo n'implémente pas encore ça, donc ça ira très bien comme ça pour le moment.

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 09/12/2020, à 15:18

refonte du site / nouveau design

#2 Le 09/12/2020, à 15:43

Re : refonte du site / nouveau design

#3 Le 09/12/2020, à 15:48

Re : refonte du site / nouveau design

#4 Le 10/12/2020, à 19:49

Re : refonte du site / nouveau design

#5 Le 17/12/2020, à 06:51

Re : refonte du site / nouveau design

#6 Le 17/12/2020, à 13:44

Re : refonte du site / nouveau design

#7 Le 18/12/2020, à 03:40

Re : refonte du site / nouveau design

#8 Le 18/12/2020, à 03:44

Re : refonte du site / nouveau design

#9 Le 18/12/2020, à 11:15

Re : refonte du site / nouveau design

#10 Le 18/12/2020, à 12:02

Re : refonte du site / nouveau design

#11 Le 18/12/2020, à 12:24

Re : refonte du site / nouveau design

#12 Le 18/12/2020, à 13:08

Re : refonte du site / nouveau design

#13 Le 18/12/2020, à 13:33

Re : refonte du site / nouveau design

#14 Le 18/12/2020, à 13:41

Re : refonte du site / nouveau design

#15 Le 18/12/2020, à 15:59

Re : refonte du site / nouveau design

#16 Le 18/12/2020, à 17:29

Re : refonte du site / nouveau design

#17 Le 19/12/2020, à 08:33

Re : refonte du site / nouveau design

#18 Le 19/12/2020, à 12:33

Re : refonte du site / nouveau design

#19 Le 19/12/2020, à 13:06

Re : refonte du site / nouveau design

#20 Le 19/12/2020, à 13:13

Re : refonte du site / nouveau design

#21 Le 22/12/2020, à 03:29

Re : refonte du site / nouveau design

#22 Le 22/12/2020, à 16:36

Re : refonte du site / nouveau design

#23 Le 05/01/2021, à 20:14

Re : refonte du site / nouveau design

#24 Le 06/01/2021, à 18:09

Re : refonte du site / nouveau design

#25 Le 07/01/2021, à 01:23

Re : refonte du site / nouveau design

Pied de page des forums