Adapter PLUXML sur un site web exixtant

corentin.aze · avril 2014

Bonjour à tous,

Je découvre PLUXML depuis quelques jours et je suis séduit par son utilisation simple, sombre et j'en passe.

Mais les choses se compliquent par rapport à mon projet...
Je vous explique :

J'ai créé un site web (avec WebAcappella) pour une association nautique, sur lequel les membres de l'association peuvent se connecter avec leurs identifiants, télécharger des documents et naviguer sur le site.

Ce que je souhaite maintenant est de pouvoir créer un article via l'administration de PLUXML et que celui-ci, après enregistrement, s'affiche sur la page d’accueil de mon site.

À votre avis, quelles sont les solutions qui peuvent convenir ?
Merci de votre aide car je tourne en rond

Stéphane · avril 2014

Bonjour

Tout d'abord bienvenue sur PluXml
Je ne sais pas l'utilisation qui est faite avec le site actuel, mais vu comme ça, je n'utiliserais que PluXml et je recréerais le design du site actuel (qui a surement été fait avec WebAcappella) pour l'adapter et en faire un thème PluXml.

corentin.aze · avril 2014

Merci pour votre réponse,
Voici le lien de mon site web :http://www.linkrenovation.com/index.html

J'ai pensé à utiliser que PluXml, mais je manque d'expérience avec celui ci ... ainsi que pour créer ou modifier un thème PluXml

Kyodev · avril 2014

bonjour
petite réponse rapide, de mémoire, car ton site est en maintenance.

a priori, WebAcappella ne fait pas du bon travail à ta place, et je fais aussi l'hypothèse qu'il n'y a pas qu'avec pluXml que tu manques d'expérience
(l'avantage, c'est que tu sais où tu dois progresser

sans connaitre ton cahier des charges, 2 critiques générales et majeures:[list=*]
[*]c'est lent et lourd (500 ou 600 ko de javascript pour très peu d'images et de html). c'est non justifié pour ce que j'ai aperçu et le meilleur moyen de rebuter un surfeur[/*]
[*]intégrer pluXml dans un iframe n'est pas une solution viable à terme (2x plus de boulot, non référencement, mauvaise ergonomie pour un surfeur, très difficile d'y utiliser du javascript...)[/*]
[/list]
personnellement, je pense que tu devrais te concentrer sur un outil comme pluXml, qui, de base, te sortira des pages propres, simple et rapide.
biensur tu n'auras pas immédiatement tout ce que tu souhaiterais, mais le temps que tu passeras à maitriser la bête sera un investissement pérenne, car ce que tu assimileras sera réutilisable sur tout autre outil aussi propre
avec webacapella, amha, tu vois très vite les limites de ce genre de [del]daube[/del] logiciel

concentre toi sur le contenu dans un premier temps, et comment l'adapter aux capacités de pluXml. tu devrais arriver rapidement à au moins en exploiter 80%

après il te restera:[list=*]
[*]conformément aux standards, à modifier la présentation comme tu le souhaites, en trouvant un thème à ton gout, ou surtout en modifiant un thème existant, ce qui te fera vite progresser (tu pourras te pencher avec bonheur sur les "css")[/*]
[*]à trouver ou développer des 'parties' qui te manquent[/*]
[/list]
ces 2 derniers points étant des évolutions à envisager à plus long terme, selon tes capacités

corentin.aze · avril 2014

Bonjour Kyodev et merci pour ta réponse ! (d’ailleurs j'y répond un peux tard mais j'étais en vacance

)
Tu as raison en ce qui concerne Web Acappella ! et j'ai donc suivi ton conseil en me consacrent entièrement à pluxml.
Je te laisse me dire ce que tu en penses : ici.

Je profite encore de ton aide car je bloque sur : MyCoinSlider
Je souhaiterais pouvoir avoir au dessus du navbar un logo à gauche ; le diapo à droite et le tout qui aurait la même largeur que le navbar.
(je ne maitrise pas encore très bien toute les commandes ...)

Merci de ton aide

cpalo · avril 2014

Bonjour

Tu as mis ton <div id="coin-slider"> avant le body.
Déplace le déja pour le mettre après :
<body class="home blog">
<div class="page-wrapper">
et avant :
<header id="header" role="banner">

Cordialement

corentin.aze · avril 2014

cpalo a écrit:

Bonjour

Tu as mis ton <div id="coin-slider"> avant le body.
Déplace le déja pour le mettre après :
<body class="home blog">
<div class="page-wrapper">
et avant :
<header id="header" role="banner">

Cordialement

Merci cpalo, je viens de corriger.

Kyodev · avril 2014

@corentin.aze: bravo, tu as gravi un niveau générationnel

très rapidement, 1mn vu de loin: clair, net, propre, bien mieux que ce que j'ai aperçu auparavant. félicitation, la direction est bonne
je ne sais pas l'état d'avancement de ce projet, donc mes remarques sont peut-être prématurées.
c'est encore lourd à charger, quand tu voudras optimiser:
tu mettras tous les scripts js en fin de page, tu feras attention que différentes versions de jQuery ne soit pas chargées, et tu pourrais adopter un chargement sur un cdn, genre ajax.googleapis (comme déjà fait à moitié).
utiliser avec bonheur firefox et le fenêtre developpeur (maj+shift+i), panneau réseau. tu y verras les ressources manquantes (erreur 404), un beau récapitulatif des différents poids chargés (selon les versions, je ne l'ai pas sur une version stable).
un affichage du code source de la (ctrl+u) page te fera voir en rouge les erreurs de code grossières (balises mal placée ou mal fermées)
tu pourrais faire le ménage dans les différents plugins, devant une telle quantité, j'imagine que tous ne servent pas, mais que tu te fais un plaisir de tester.
peut-être ajuster la taille des images, inutile de faire charger une grosse image (lourde) qui sera redimensionnée.... ou mal positionnée comme dans le slider
je suis pas sûr que coinSlider soit optimum, notamment lors du redimensionnement de la fenêtre du navigateur. il y en a de plus efficace, qui ne s'appuient pas sur le background et seront plus souples, compatibles et responsives

corentin.aze · avril 2014

Maintenant que que mon "coin-slider" ici est réglé, je vois comment faire pour ajouter une image (affin de combler l'espace à gauche) mais je n'arrive pas à la placer correctement dans le header...

Auriez vous des pistes ?
Merci.

corentin.aze · avril 2014

Kyodev a écrit:

@corentin.aze: bravo, tu as gravi un niveau générationnel
très rapidement, 1mn vu de loin: clair, net, propre, bien mieux que ce que j'ai aperçu auparavant. félicitation, la direction est bonne
je ne sais pas l'état d'avancement de ce projet, donc mes remarques sont peut-être prématurées.
c'est encore lourd à charger, quand tu voudras optimiser:
tu mettras tous les scripts js en fin de page, tu feras attention que différentes versions de jQuery ne soit pas chargées, et tu pourrais adopter un chargement sur un cdn, genre ajax.googleapis (comme déjà fait à moitié).
utiliser avec bonheur firefox et le fenêtre developpeur (maj+shift+i), panneau réseau. tu y verras les ressources manquantes (erreur 404), un beau récapitulatif des différents poids chargés (selon les versions, je ne l'ai pas sur une version stable).
un affichage du code source de la (ctrl+u) page te fera voir en rouge les erreurs de code grossières (balises mal placée ou mal fermées)
tu pourrais faire le ménage dans les différents plugins, devant une telle quantité, j'imagine que tous ne servent pas, mais que tu te fais un plaisir de tester.
peut-être ajuster la taille des images, inutile de faire charger une grosse image (lourde) qui sera redimensionnée.... ou mal positionnée comme dans le slider
je suis pas sûr que coinSlider soit optimum, notamment lors du redimensionnement de la fenêtre du navigateur. il y en a de plus efficace, qui ne s'appuient pas sur le background et seront plus souples, compatibles et responsives

Merci pour vos encouragements ! J'avance lentement, mais surement tout en apprécient les possibilités de pluxml

Je ferais un ménage et des corrections niveau script à la fin car je l’héberge provisoirement sur mon hébergeur, le temps de la conception.

Encore merci pour votre soutient et vos appuis.

PS : Pouvez vous m'aider (encore une fois) pour placer un logo à gauche de mon "coin-slider" ?

danielsan · avril 2014

j'aime bien l'atmosphère qui s'en dégage, calme avec une touche de dynamisme.
j'alignerai le bord gauche des articles avec celui du menu horizontal

Pour ton logo, as-tu essayé de le placer dans le fichier header.php avant coinSlider ?

corentin.aze · avril 2014

danielsan a écrit:

j'aime bien l'atmosphère qui s'en dégage, calme avec une touche de dynamisme.
j'alignerai le bord gauche des articles avec celui du menu horizontal

Pour ton logo, as-tu essayé de le placer dans le fichier header.php avant coinSlider ?

Oui j'ai essayé :
Logo avant coinSlider
== l'image de mon logo s’affiche au dessus de coinSlider
Logo après coinSlider
== l'image de mon logo s’affiche en dessous de coinSlider

sans doute un ligne de code dans le css ??

Kyodev · avril 2014

fait quelques essais avec firebug. la structure de ton code html devrait être la suivante:

[== HTML ==]
<header id="header" role="banner">
	<div id="logo">
		<div class="container clearfix">
			<div class="post_type_label "></div> <!-- utiliser div au lieu de span -->
			<div id="coin-slider-coin-slider" class="coin-slider">
				...
			</div>
			<div class="clear"></div>
			<nav role="navigation" class="main-nav" id="site-navigation">
				...
			</nav><!-- #site-navigation -->
		</div>
	</div>
</header>

le css corrigé qui fonctionne en l'état:

[== CSS ==]
/* corrections majeures à apporter */
.post_type_label {
/*
  left: 120px;
  border-radius: 30px 0 0 30px;
*/
	background: url("images/logo300.jpg") no-repeat;
	position: relative;
	float: left;
	height: 300px;
	width: 300px;
	top: -45px;
}
.coin-slider {
/*
	position: relative;
	left: 410px;
	top: 0;
*/
	overflow: hidden;
	width: 770px;
	float: right;
}

remarque:
* le slider est réduit à 770px pour correspondre à la largeur apparente de la barre de navigation (1070px, logo 300px)
* la largeur de 1100px pour le container est assez originale, plutôt trop large pour un design de largeur fixe.

à terme, je te suggère cette évolution

[== HTML ==]
<div class="post_type_label ">
	<img src="logo_yacht-club-de-saint-briac" />	<!--mieux utiliser une image qu'un background-image -->
	<h1>Yacht Club de Saint Briac</h1>	<!-- du texte (référencement) -->
</div>

le logo mérite une img dans le code avec un nom adapté pour le référencement
le nom du club doit apparaître en texte (référencement, accessibilité/lecteur d'écran), même s'il est caché par css.

ComputingFroggy · avril 2014

Bravo Corentin,

tu as fait du super boulot !
J'avais vu ton ancien site (avec Web Acappella) et maintenant c'est franchement bien.
Un petit peu lent à charger la première fois quand même.

Bon boulot et tu t'es fait un thème bien sympa.

Bonne continuation,
L@u

corentin.aze · mai 2014

Bonjour à tous !

Désoler pour mes réponses tardives, mais je suis souvent en déplacement...

Encore merci pour votre aide et ce qui m'a fait prendre conscience qu'il fallait que je plonge mon nez dans des cours de HTML, CSS,... car j'avais attaqué la réalisation du site avec des connaissances très minim.

Après de longues soirées, j'ai réussi à obtenir (à peu près) ce que je voulais == Je vous laisse y jeter un œil et me faire un retour : ici ==

Il me reste encore pas mal de boulot avant une mise en ligne ( nettoyage dans mes fichiers et autres réglages )

Mon projet de site internet est pour une association, que je souhaite faire évoluer avec ce site, avec la mise en place de :
- Paiement de cotisation en ligne et un espace membre détaillant leurs infos personnelles, récapitulatives de leur paiement et la possibilité d'édite en PDF leurs bulletins d'adhésion et leurs factures.
- Paiement en ligne des stages de voile ( un module est fourni par la fédération )
- Mettre en place une petite boutique en ligne .

Tout ceci sera un travail sur le temps, et je suis preneur de toute personne qui souhaite me consacrer un peu de temps afin de m'épauler dans ces tâches.
Je ne promets aucune rémunération, mais pourquoi pas expédier un bon plateau de fruit de mer

.

Je termine en remerciant les personnes qui contribue à l'élaboration de Pluxml, car j'ai pu mettre sur pied un site web autonome ! permettant au bénévole de l'association de publier au même les articles.

Bonne journée et bon weekend à tous

PS : Je vais continuer à chercher, mais je bloque un peu sur la partie « Responsive » de l’affichage sur Smart phone et tablette et sur la position du « coinSlider », que je souhaite positionner à côté du logo et non au-dessus comme vous pouvez le voir .

corentin.aze · mai 2014

ComputingFroggy a écrit:

Bravo Corentin,

tu as fait du super boulot !
J'avais vu ton ancien site (avec Web Acappella) et maintenant c'est franchement bien.
Un petit peu lent à charger la première fois quand même.

Bon boulot et tu t'es fait un thème bien sympa.

Bonne continuation,
L@u

Merci beaucoup pour ton soutient !
Et oui, j'ai bien remarqué la lenteur, mais je pense que c'est dû à un nettoyage de mes fichiers que je dois faire et que j’héberge 3 sites web sur mon hébergeur.

Adapter PLUXML sur un site web exixtant

Réponses