[DEV- style-enfant] J'avance dans la création du style-enfant Will, vos avis?

[314r]

Bonjour,

Pour les membres ici qui sont intéressés, pourriez-vous tester la page d'accueil du style? Elle est terminée.

J'ai codé la structure du Forum et les couleurs. La mise en page.
Le reste est à venir.
Si vous ouvrez un sujet, rien n'a encore été fait.
Il y a les hover qui fonctionnent et c'est pas mal tout.

Et l'activation et la désactivation du caroussel qui devrait fonctionner correctement.

Note importante aux membres qui ont déjà visités la page, il faudra vider l'historique de votre navigateur si la page n'est pas comme sur l'image jointe. ;-)





J'aimerais votre avis.
Merci aux participants et participantes, j'apprécie.

[Dev Agistral]

Hello!

J'ai regardé rapidement la surface utilisateur. Il n'y a pas de problème pour rentrer dans les forums et dans les onglets mais il y a 5 grosses bandes de couleurs à l'entrée du site qui ne rend pas cela très accueillant, et aussi la taille de la police dans la FAQ est très grande, ce qui rend difficilement lisible les réponses.
J'espère avoir pu aider !

[314r]

Salut,

Les bandes de couleurs sont un outil temporaire qui se sera pas inclus dans la version finale du projet.

C’est un indicateur instantané pour connaître dans quelle dimension se situe notre appareil. La première ligne de couleur du haut va changer selon la dimension en pixels de votre appareil. Si on visite le site avec un appareil mobile, la ligne de couleur en haut de page va prendre la couleur qui représente dans quel format est notre appareil. Si l’appareil se situe entre 768px et 992px la bande du haut sera jaune mais si votre appareil fait moins que 576 pixels elle sera bleu. C’est là pour me rendre la tâche plus facile. Je vois de suite dans quel fichier css je dois corriger une erreur.

Je n’ai pas encore fini de coder la page index. Donc, si vous cliquez sur un lien, ces autres niveaux de profondeur ne sont pas encore codés. J’avance par étapes.

Merci d’avoir pris du temps pour tester le style et pour avoir écrit un message.
J’espère terminer la page index à toutes les dimensions d’ici une ou deux semaines. Ensuite, j’entrerai plus à fond dans les différents niveaux du Forum.

[314r]

Bonjour,

petite mise à jour de mon travail en "mobilefirst" sur le style Will.

J'ai débuté avec une manière de travailler (desktopfirst) et cette manière là a évoluée vers une autre façon de faire (mobilefirst). J'ai fixé les limites de code entre 320px de largeur par 576px. Plus large que ça il va falloir un bon bout de temps avant que je puisse le coder. Entre 320px et 576px il y a du travail intense. Je veux terminer de coder TOUS les niveaux du Forum avant de définir les détails résiduels qui vont rester aux résolutions d'écran plus grandes que 576px. Lorsque tout le Forum va être fini en mobilefirst, le reste va demander encore pas mal de travail.

Je viens de régler le code pour les liens et la façon d'en ajouter au cas par cas. Il restera toujours les appareils qui, comme les iPhones, ne respectent pas le code et je ne veux pas forcer les iPhones avec du code javascript à utiliser mon code css pour des liens. Donc, les résultats que j'obtiens en mode développeurs sur les différents navigateurs ne ressemblent pas toujours aux résultats réels sur de vrais appareils. Mais le code que j'utilise est solide. L'expérience mobilefirst va être optimisée.

Comme conséquence de ma nouvelle approche mobilefirst il y a que la page index que j'ai présenté plus haut comme étant terminée et bien elle ne l'est pas tout à fait. Le visuel va être pas mal pareil mais le fonctionnel n'est pas terminé de coder.

Je vais remettre la version de travail du style-enfant Will sur mon Forum de démonstration et il va y avoir les barres de couleurs en haut des pages. Cet outil est pratique pour définir d'un coup d'oeil en quel format se situe votre appareil. Et le mien. N'en tenez pas compte lorsque vous visiterez le Forum de démonstration.


Les choses de passent donc dans la zone bleu.

[314r]

Bonjour,

Je présente une image qui donne la vue globale de toute la page index du Forum.
Cliquer sur le lien suivant va ouvrir l'image en grandeur réelle, l'image fait 321 pixels de large par 3059 pixels de haut. Ce sont les dimensions réelles de la Page Index du Forum quand on la visite avec un appareil de 320px de large minimum et qui ne dépasse pas 575px de large.

Zoom du navigateur = 100%.
https://314r.ca/n0c-storage/fichiers/pa ... -320px.png


Mobile First oblige: aucune des autres résolutions n'est encore codées. Ça s'en vient, j'avance.

Le structurel et le design sont ce qu'ils sont pour l'instant. Des modifications à venir selon vos suggestions restent possibles. J'ai encore un petit ménage à faire dans le code de ma feuille de style 1-320px.css avant de travailler sur
la même page index mais aux 4 autres résolutions plus larges que j'ai décidé de coder.
min-width: 576px
min-width: 768px
min-width: 992px
min-width: 1152px


Vos remarques et commentaires pour en discuter sont les bienvenues.
:-)

[314r]

Salut,

Voici une image qui montre l'état de mon travail jusqu'au .wrap pour les 5 largeurs de mes "break points".
Il faut regarder l'image suivante à 100% de son grossissement pour voir les différences entre les points de rupture en largeur réelles.

https://314r.ca/n0c-storage/fichiers/jusquau-wrap.png

[314r]

Bonjour,

Je viens juste de terminer mon fichier css en mode responsive pour les écrans de moins de 575 pixels de large.

Je vais pouvoir réaliser mes fichiers css pour les largeurs plus grandes.
Les niveaux intérieurs du Forum n'ont PAS été travaillés. J'avance par étape et tant que l'étape de la page index ne sera pas terminée pour toutes les largeurs d'écrans je ne toucherai pas à l'intérieur du Forum.

J'ai deux montages photo qui montrent l'apparence de la page Index à 320 pixels de large:


La première c'est toute la page Index en mode invité non connecté:

La deuxième c'est pour montrer le haut de la page en mode administrateur connecté pour montrer que les icônes de navigation sont bien positionnés et fonctionnels.


https://314r.ca/n0c-storage/fichiers/pa ... l-fini.png

https://314r.ca/n0c-storage/fichiers/pa ... onnect.png

[314r]

Bonjour,

Je travail à avoir un css qui agit là où il faut et qu'il soit assez solide.
Le travail est loin d'être terminé.

Durant les derniers jours, j'ai fait du ménage dans le wrap et dans ma feuille de style pour que cela soit propre et logiquement structuré. Selon l'ordre de la page Index du Forum.

J'ai inséré les "charset responsive" dans la feuille de style principale, donc je n'ai plus 5 feuilles de styles mais juste une.

J'ai terminé la page index niveau code css, pour le responsive first et il me reste à coder les différents "breaks points" de la page Index.

Ensuite seulement je vais entrer dans le coeur du Forum.


Si vous avez des retours et des commentaires pour m'aider je suis disponible.
Pour ce qui est des harmonies de couleurs on est pas rendu là ;-)


Je propose en téléchargement le style-enfant dans sa version 1.0.3 qui est encore embryonnaire.
https://314r.ca/n0c-storage/fichiers/Will_1.0.3.zip

Bon Forum!

[314r]

Bonjour,

Ceci amène à cela.
J'apprends en faisant des choses et non pas l'inverse. Il y a des gens qui doivent connaître tout avant de faire et je ne suis pas comme ça. Je fais des choses et j'apprends au fur et à mesure.
Conclusion de tout ceci?

Le style prosilver a été codé et pensé en desktop first. Mon idée de coder un style enfant en mobile first a rencontré plein de problèmes de code. L'approche "mobile first" ne fonctionne pas pour moi.

Je reprends tout mon code à partir de zéro mais en DESKTOP FIRST cette fois ET en utilisant les MÊMES breakpoint que prosilver.

Je reviendrai vous proposer la page Index du Forum recodée, avec l'approche Desktop First, lorsqu'elle sera plus avancée.
À bientôt
Pierre 
 
Ajouté 22 heures 43 minutes 16 secondes après :
 
 https://314r.ca/n0c-storage/fichiers/will-sans-logo.png


https://314r.ca/n0c-storage/fichiers/will-avec-logo.png

[314r]

Bonjour,

La page index, codée en respectant les breakpoints originaux de phpbb et en travaillant non plus en mobile first mais en desktop first donne ceci comme résultat:
https://314r.ca/n0c-storage/fichiers/de ... ermine.png

Le zip du style avec la page index codée:
https://314r.ca/n0c-storage/fichiers/Will_1.0.4.zip

[314r]

Bonjour,

L'image grand format a été remontée en haut du Forum et le logo a été remis en place pour permettre son utilisation dans le Forum. Il y a donc 1-) le logo, 2-) le titre du Forum 3-) l'image grand format et 4-) la description du Forum.

Et j'ai commencé à coder dans les niveaux intérieurs du Forum. Comme les zones "Accès rapide", "FAQ", "Confidentialité", "Conditions" etc..

Une légère modification de la charte des couleurs pour enlever le côté vert fluorescent a aussi été faite. J'en ai profité pour augmenter le taux de lisibilité de 8,5:1 à 9,5:1

https://314r.ca/n0c-storage/fichiers/mo ... -image.png


https://314r.ca/n0c-storage/fichiers/mo ... _image.png


https://314r.ca/n0c-storage/fichiers/Wi ... leurs.html

[314r]

Mise à jour du projet style enfant Will

Sur pause pour cause de santé