Modifier un style de page et sauvegarder

Modifier un style de page et sauvegarder - HTML/CSS - Programmation

Marsh Posté le 02-06-2014 à 11:07:17    

Bonjour,
 
J'aimerais savoir quelle méthode est utilisée pour permettre à un internaute de modifier le style de la page (couleurs, tailles, agencement...) sans le limiter à un choix parmi des feuilles de style existantes.
 
Comment sauvegarder ses préférences et les appliquer à chaque connexion ? Est-ce une modification dynamique de la feuille de style ? Du Javascript qui est appelé à chaque chargement et édite le style en reprenant les variables qui représentent les préférences sauvegardées en BDD ? Une histoire de templates (je sais pas du tout ce que c'est) ?
 
Je précise que je peux aussi utiliser PHP s'il facilite les choses à ce niveau.
 
Merci.


Message édité par psychodarksquall le 02-06-2014 à 11:12:14
Reply

Marsh Posté le 02-06-2014 à 11:07:17   

Reply

Marsh Posté le 02-06-2014 à 12:27:20    

Javascript tourne du côté du poste de l'utilisateur.
Or, pour des raisons de sécurité, on ne peut rien stocker sur le poste de l'utilisateur, hormis des cookies s'il l'accepte.
Donc, on peut imaginer un script Javascript qui va mémoriser le choix de l'utilisateur dans un cookie, et qui plus tard relira le cookie au début de l'affichage pour faire la mise en page désirée.
Mais non seulement beaucoup d'utilisateurs nettoient régulièrement leurs cookies, mais en plus il y a des restrictions et ce n'est pas très facile de changer une présentation dynamiquement du côté du poste de l'utilisateur.
 
PHP tourne du côté du serveur.
Donc, on peut avoir une base de données des utilisateurs sur le serveur qui contient leurs identifiants et leurs choix.
PHP est couramment utilisé pour générer des pages dites "dynamiques", c'est à dire des pages différentes selon des paramètres, avant de les envoyer sur le poste de l'utilisateur.
 
Si vous n'avez jamais fait de PHP avant, ce n'est pas très compliqué. Ca s'apprend. C'est un langage très agréable et bien documenté sur le site officiel php.net.
La petite difficulté initiale est l'installation de l'environnement, car il faut mettre Apache et le configurer.


Message édité par olivthill le 02-06-2014 à 12:27:52
Reply

Marsh Posté le 02-06-2014 à 12:58:17    

Merci pour cette réponse.
 
Je sais que Javascript fonctionne côté client et PHP côté backoffice, ce que je me demandais surtout c'est comment appliquer un style CSS pour un utilisateur donné.
 
D'après ce que vous me dîtes, on peut sauvegarder ses préférences en base de données et ensuite les charger quand il se connecte, ça veut donc dire qu'on applique le style en Javascript (avec genre element.style.backgroundColor) en récupérant les préférences utilisateur dans la BD ? N'est-ce pas un peu lourd et "bricolage" ? N'y a-t-il pas un moyen plus adapté pour appliquer un style personnalisé à une page web (du genre les templates justement, mais je ne connais pas ce procédé) ?
 
Merci.

Reply

Marsh Posté le 02-06-2014 à 15:19:22    

Je n'ai jamais vu de template pour ça, mais d'autres en ont peut-être vus et répondront.
 
Si on utilise une base de données, cela signifie qu'on utilise un programme du côté du serveur, comme le PHP par exemple.
Donc, pourquoi allez s'embêter à faire du javascript avec un element.style.backgroundColor ?
Non. Avec le PHP, on génère directement la page html avec la bonne couleur, ou on génère un css avec la bonne couleur.
Il n'y a plus besoin de Javascript (on peut l'utiliser quand même si on veut). On fait la customisation en PHP avant l'envoi vers le poste de l'utilisateur.


Message édité par olivthill le 02-06-2014 à 15:20:09
Reply

Marsh Posté le 02-06-2014 à 15:21:22    

En PHP on peut générer un fichier CSS qui sera utilisé par le HTML ? Et du coup éditer celui existant je suppose.


Message édité par psychodarksquall le 02-06-2014 à 15:21:59
Reply

Marsh Posté le 02-06-2014 à 15:49:10    

On peut (sauf si l'hébergeur du site le refuse) créer ou modifier des fichiers qui se trouvent sur le serveur. Donc, cela peut-être des fichiers css.
 
Le petit problème est que les requêtes http échangent des flux html, mais pas des flux css (en simplifiant l'explication). Si on crée un fichier css contenant du bleu, alors il sera accessible par tous les autres utilisateurs, même ceux qui veulent du rose. On peut ruser en créant plusieurs fichiers css, un style_bleu.css et un style_rose.css et dans le code html généré, l'utilisateur garçon aura <link rel="stylesheet" type="text/css" href="style_bleu.css" /> et l'utilisateur fille aura <link rel="stylesheet" type="text/css" href="style_rose.css" />.
 
L'autre solution est de générer du html qui inclut le style dans la partie head avec <style type="text/css">.class_toto {color:blue;...}</style> ou <style type="text/css">.class_toto {color:pink;...}</style>. Vous voyez au lieu du <link ... style ...> on a carrément le <style ...>.

Reply

Marsh Posté le 02-06-2014 à 15:55:38    

La solution pourrait être effectivement de proposer à l'utilisateur d'éditer un fichier css qui contiendrait uniquement les règles de styles modifiables par l'utilisateur (un css qui lui serait donc spécifique à son profil, un css par défaut serait chargé sinon, le css n'a pas été édité). Ce fichier serait ensuite stocké sur le serveur (en BD, on pourrait stocker uniquement le chemin du css, sauvegardé lui sur le HDD du serveur). Ainsi, le css pourrait être mis en cache par le navigateur, limitant la conso de bande-passante.
 
Maintenant, est-ce que ça vaut le coup de proposer ça à l'utilisateur ? Parce que savoir éditer une feuille de styles, faut déjà maîtriser :/ Où alors, faire une interface wysiwyg permettant d'éditer graphiquement le css, mais là, on va tomber dans de gros dév pour arriver à un truc du genre de dreamwaever. :pt1cable:  
 
Pour info, y'a une autre solution pour ceux qui maîtrisent le css et qui t'éviterait du dév : l'extension greasemonkey pour Firefox (doit bien exister un équivalent sur les autres navigateurs, je pense). Chaque utilisateur se fait un javascript exécuté à chaque fois qu'il va sur ton site. En manipulant le DOM, il peut changer l'apparence de ton site ;) J'ai des collègues qui avaient fait ça pour une appli que j'avais développé en php. Y'en avait même un qui avait fait une charte "Hello Kitty" :D Moi, j'avais rien eu à faire dans mon appli...


Message édité par rufo le 02-06-2014 à 15:57:48

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 02-06-2014 à 16:11:01    

Il ne faut surtout pas que l'utilisateur ait à coder son CSS. En fait il faudrait que l'utilisateur ait une page du type :
 
Couleur des titres
Taille des titres
Largeur de bordure des titres
etc...
 
Des trucs explicites pour lui, et que quand il clique dessus ça lui ouvre un panneau de couleurs, une liste de tailles, tout ça. Qu'il puisse personnaliser son interface graphique en fait.
 
Mais je ne sais pas comment conserver et restituer ces infos, si on peut générer un fichier CSS reprenant toutes ses préférences, où s'il faut les conserver en BD pour ensuite les charger en PHP ou Javascript.

Reply

Marsh Posté le 03-06-2014 à 09:51:35    

Ben je t'as expliqué une façon de faire dans mon précédent post. En BD, tu stockes le path du fichier css propre à l'utilisateur, qui aura été généré suite aux modifs qu'il aura faites, via une IHM, puisque c'est ce que du décrits. Par contre, le fait de passer par une IHM limitera forcément ses possibilités, une IHM pouvant difficilement proposer tous ce qu'il est possible de faire avec des règles css...


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 03-06-2014 à 09:57:02    

Oui oui le but c'est qu'il puisse modifier certains éléments clés, en fait la vraie raison c'est qu'une entreprise puisse personnaliser le code couleur du site et mettre son logo, pour que ça devienne leur outil interne.
 
Bon ben c'est cool si on peut générer dynamiquement un fichier CSS et le modifier.
 
Merci.

Reply

Marsh Posté le 03-06-2014 à 09:57:02   

Reply

Marsh Posté le 03-06-2014 à 10:05:38    

Pour rappel, le css, c'est simplement un fichier texte. Le PHP peut générer n'importe quel type de fichier texte (binaire, aussi, d'ailleurs). ;)


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed