Nouvelle réalisation | WebRadio

Toffee'look · avril 2010

Voila voila une réalisation d'une web radio appeler: Mus'radio

Présentation:

Mus'Radio a été créée en Décembre 2008. Aujourd'hui c'est une Webradio diffusant du Dancefloor et des Nouveaux Talents, du groupe QL&SP NetProduction. Une équipe est là pour vous faire passer de merveilleux moment sur notre antenne et pour vous faire danser jusqu'au bout de la Nuit.....
Mus'Radio, The Best Of Dance !

Un thème très réussi ( pour mon avis ) au couleur rouge , noirs , blanc .
Avec les script cufon pour donné un belle effet au titre des :
- page
- article
- sidebar

Pour le lien : http://www.mus-radio.niloo.fr/

Voila a vous

PS: Il son juste en train de le remplir donc ne vous inquiéter pas si vous voyer pas grand chose.

Stéphane · avril 2010

Joli. En revanche la barre "Dedidace" (là où c'est écrit le "système de dédicace sera dispo très bientôt !") reste fixe quand on redimensionne la fenêtre du navigateur, alors que tout le reste s'adapte bien à la nouvelle largeur (centrage). Du coup elle n'est plus centrée et elle décalée par rapport au reste du site.

Toffee'look · avril 2010

oui en effet je vais voir ce que je peux faire.
Sinon je voulais savoir si toi ( stephane ) ou autre personne serai d'acores de faire un script comme le formulaire de contact mais pour passé une dédicace ??
je m'explique :

une page d'envoi (comme celle de contact sur le wiki) :
avec le formulaire suivant :

pseudo : mon pseudo
titre ou artiste : mon titre ou artiste
message : mon message

envoyer

Et faire en sorte que les message défile dans la barre dédicace comme ceci :

pseudo du membre - titre ou artiste - message , pseudo du membre - titre ou artiste - message , ect...

car il utilise pas de BDD, juste le forum et sur BDD

voila merci a celui qui pourra m'aider

Sinon je tien à dire que cette réalisation a été totalement gratuite

Stéphane · avril 2010

L' "ID du membre" il vient d'où ?

Toffee'look · avril 2010

A mince excuse moi ID et en faite le pseudo du membre

DSL

Stéphane · avril 2010

ok, mais membre de quoi. où et comment le récupérer ?

Toffee'look · avril 2010

ba en faite le script fonctionne comme ceci :

un membre quelconque vas sur la page "dedicace"
et rentre ceci dans le formulaire :

Ton Pseudo : Toffee'Look (exemple)

Titre ou Artiste : Akon (exemple)

Ton Message : super radio ! merci a vous pour ce son ! (exemple)

il clic alors sur envoyé

et le script ( ou je sais quoi ) convertie tous sa dans cette forme :
( dans la barre dedicace et le fais défile )

[ Toffee'Look - Akon - super radio ! merci a vous pour ce son ! ]

voila je peut pas faire plus simple et un grand merci a toi

Gzyg · avril 2010

Pour être membre, il a fallu auparavant s'enregistrer quelque part...

Si c'est sur le forum il faut donc savoir de quel forum il s'agit pour avoir la description de la table "user"...

à plus,

Gzyg

Toffee'look · avril 2010

non il n'y a aucun enregistrement sais juste pour savoir qui a poster la dédicace.

EDIT : je viens d'en parler avec eu et il m'on dit de prendre quand même avec la BDD

donc si un dev veux bien modifier ce script http://tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/

pour le rendre de la même façon que ce site http://www.toane.com/

je m'explique :

au lieux d'afficher les note dans dans post'it,

Toi ou vous ( le dev ) modifier le script pour afficher non en post'it mais en note défilant dans la barre dédicace

comme sur le site " http://www.toane.com/ "

voila merci a vous | le premier script tien toujours ne vous inquiéter pas

Frédéric · avril 2010

Pourquoi ne pas réserver une page/article pour les dédicace dont tu n'affiche pas dans la liste des catégories/pages.
Ensuite en accueil tu fais un lien qui ouvre une pop-up avec l'ID de ton div du form des commentaires (ex: ?article4/dedicaces#form).

Tu modifie ensuite l'affichage de tes derniers commentaires (ici dédicaces) dans home.php.

Je sais pas si c'est très clair, mais pour moi tu n'as pas besoin d'autres ajout pour ca.

Stéphane · avril 2010

Ha oui très bonne idée Fred.
Et facile à faire en plus.

Toffee'look · avril 2010

ouai fred je vais faire cela mais peut tu être plus précis car je voit pas trot la :S

Frédéric · avril 2010

@Toffe'look => Je tente de te faire une démo d'ici ce soir.
@Stéphane => Comment utiliser la fonction art_id dans l'url comme dans l'exemple ci dessus ?

Ça ?:

function lastComList($format='<li><a href="#art_id(4)">#com_author a dit :</a><br/>#com_content(50)

Stéphane · avril 2010

Heu l'appel de la fonction lastComList se fait de la façon suivante

function lastComList($format='<li><a href="#com_url">#com_author a dit :</a><br/>#com_content(50)</li>',$max=5,$art_id='')

Le dernier paramètre te permet de faire une sélection sur les commentaires d'un seul article

cassius974 · avril 2010

Sympa le thème, j'aime bien. Bon boulot.

Frédéric · avril 2010

Merci Stéphane, j'ajoute ton exemple au wiki car il y en a pas et peux servir;)

Sinon voici le système de dédicace envisagé mais à tester de ton coté niveau du pop up car chez moi il se referme quasi aussitôt sous firefox et marche bien sous safari.

1°) Créer une catégorie "Dédicaces" avec 0 en ordre. (permet de ne pas afficher en index)
2°) Créer un article "Dédicaces" (pour stoker toutes tes dédicaces)
3°) Créer une page statique avec le code suivant:

<?php 
if(!defined('PLX_ROOT')) exit;

# Notre capcha
$capcha = new plxCapcha();

# Nos variables
if($_POST['rep2'] == md5($capcha->gds.$_POST['rep'])) ;
?>
<div id="form">
		<h2>Rédiger une Dédicace</h2>
		<form action="http://pluxml.hosthere.co.cc/?article4/dedicaces#form" method="post">
			<fieldset>
				<div class="form_left">
					<label><?php echo LANG_FORM_NAME; ?></label>
					<input name="name" type="text" size="20" value="" maxlength="30" /><br />
					<label><?php echo LANG_FORM_WEBSITE; ?></label>
					<input name="site" type="text" size="20" value="" /><br />
					<label><?php echo LANG_FORM_MAIL; ?></label>
					<input name="mail" type="text" size="20" value="" /><br />
				</div>
				<label><?php echo LANG_FORM_COMMENT; ?></label>
				<textarea name="content" cols="35" rows="6"></textarea>
				<div class="clearer"></div>
				<p class="button">
				<?php echo $capcha->q(); ?> : <input name="rep" type="text" size="10" />
				<input name="rep2" type="hidden" value="<?php echo $capcha->r(); ?>" />

					<span><input type="submit" value="<?php echo LANG_FORM_SUBMIT; ?>" /></span>
				</p>
			</fieldset>
		</form>
	</div>

4°) Télécharger l'archive qui contient les Js nécessaire et envoyer à la racine de ton pluXml.
5°) Dans le template header.php de ton thème.Ajoute entre <head></head> le code suivant:

<script type="text/javascript" src="Dedicaces/jquery.js"></script> 
<script type="text/javascript" src="Dedicaces/jquery.vticker.js"></script>
<script type="text/javascript" language="javascript" src="Dedicaces/zoombox.js"></script>
<link href="Dedicaces/zoombox.css" rel="stylesheet" type="text/css" media="screen" />

6°) Dans le template home.php juste après :

<?php include(dirname(__FILE__).'/header.php'); # On insere le header ?>
<div id="page">

Ajoute:

<script type="text/javascript">
$(function(){
	$('#dedi').vTicker();
});
</script>

<div id="dedi-barre>
<span><a href="http://pluxml.hosthere.co.cc/?static2/dedicaces" rel="zoombox 700 500" title="Envoyer un Message" >Dédicaces</a></span>
	<div id="dedi">
		<ul><?php $plxShow->lastComList('<li><a href="#com_url">#com_author a dit :</a> #com_content(80)</li>',$max=5,$art_id='4'); ?></ul>
	</div>
</div>

7°) Remplacer:

http://pluxml.hosthere.co.cc/?static2/dedicaces

par l'url de la page statique dédicace.

Et

$max=5,$art_id='4'

par le nombre de dédicaces à afficher et le numéro ID de ton article.

Il te reste donc plus qu'a personnaliser tes id #dedi-barre et #dedi.

super_g2 · avril 2010

pas mal l'idée de stocker ça dans un article, très bonne idée.

d'ailleurs, la zone déroulante en haut affiche en iframe la page elle-même, si c'est juste pour mettre un formulaire d'ajout de dédicace, autant essayer de linker un formulaire maison (page statique ordre 0?) avec le contenu de l'article (via des créations de balises <a name> par exemple, ou de remplir la section commentaires comme actuellement).

concernant le souci du lien "popup" dans le div "dedi-barre", essaye avec un autre script que lyteframe, genre zoombox par exemple. celui-ci fonctionne, je le sais car je l'utilise. on sera fixer si c'est un autre souci ou pas

très bon tuto des possibilités offertes par les pages statiques/article en prévision je sens ^^
ce serait un super cas d'étude à rédiger proprement dans un billet du blog ou autre

Frédéric · avril 2010

Oui en faite la zone déroulante c'est pour tester une autre façon de faire par object.

Et oui un tuto est en cours pour en faire une variante de Shoutbox une fois l'insertion du formulaire soit correcte.

Merci du conseil je test donc zoombox voir

super_g2 · avril 2010

je viens de me relire sur le coup des pages statiques/article, ce n'est pas forcément très clair.

Actuellement, la solution de Fred est d'utiliser un article "caché" dans une catégorie masquée via "ordre 0". Cet article est utilisé pour stocker sous forme de commentaires les dédicaces envoyées via le formulaire de commentaire de ce même article (via un affichage par une popup/iframe/...)
L'avantage de cette solution est d'utiliser (et de prouver en même temps^^) les outils mis à disposition par PluXML itself ^^ L'inconvénient est que cette "popup/iframe/..." affiche trop clairement la page entière (l'article caché...).

Une solution serait d'utiliser la propriété des pages statiques de pouvoir gérer le php. Le formulaire pourrait être (à la manière du formulaire de contact du wikipluxml) encapsulé dans une page statique (masquée du menu par la technique "ordre 0" ^^), formulaire traité par cette même page (via $_POST ou autre).
Ce formulaire pourrait être chargé de remplir l'article "caché" en créant une entrée sous forme de lien <a name> (anchor) pour chaque dédicace.

ainsi, on découple les 2 affichages.

on pourrait pousser le concept plus loin, car quite à faire des modifications dans le code de pluxml (les ajouts du post de Fred, qui sont nécessaires dans tous les cas), on pourrait créer une page php spéciale pour cette fonction de dédicace. mais cela reviendrait presque au même, sauf une mise en forme totalement libre

(ou alors, pouvoir créer un style.css appliqué uniquement à la page de dédicace). Le souci de cette variante (la page php libre) sera de ne pas pouvoir utiliser le moteur de pluxml pour choper les dernières dédicaces

enjoy

ps : zoombox dispo ici http://www.grafikart.fr/blog/zoombox-285 et tuto ici http://www.grafikart.fr/tutoriels/jquery-zoombox-85

Toffee'look · avril 2010

ouaaaa merci Fred merci merci je le fait de suite !!!

Aaa t trot bon !!!

Toffee'look · avril 2010

@super_g2 oui effectivement je penser a faire un style.css pour la page dédicace mais le même truc ma fais dire non : comment intégré les dédicace ??

mais ceci dit je vois déjà pour celle de Fred qui ma l'aire brillante !

super_g2 · avril 2010

Toffee'look a écrit:

@super_g2 oui effectivement je penser a faire un style.css pour la page dédicace mais le même truc ma fais dire non : comment intégré les dédicace ?? mais ceci dit je vois déjà pour celle de Fred qui ma l'aire brillante !

ah, il faut juste réfléchir un peu, mais l'idée est sensiblement la même que celle de Fred, juste utiliser une statique en plus, pour mieux organiser le code

sinon, @Fred, ta page de test est hs car tu as fait une petite erreur de mise en commentaire avec les  initiaux

Frédéric · avril 2010

Ok alors via une page statique super_g2 ca deviens plus complexe et pour cause faut inclure je ne sais quel lib en plus pour avoir le capcha qui fonctionne (Test ici).

Testé avec php echo ou code d'origine du formulaire et comme tu le voi le capcha qui est requis ne s'affiche pas, ou alors désactivé le capcha dans la config de PluXml qui est une mauvaise idée.

Je pense savoir comment avoir juste mon div du formulaire via le pop up qui me semble plus simple et plus léger.

Je continu mes tests

super_g2 · avril 2010

sinon, zoombox, tu aimes bien? ^^ en tout cas, ça marche

et pour le captcha, le formulaire de contact du wiki fonctionne avec, pourquoi ne pas s'en inspirer ^^ ?

edit : pour le captcha, effectivement on ne peut pas comme ça.
par contre, on pourrait essayer carrément de sauter carrément l'article pour faire plutot 2 statiques.. (enfin ça demandera pas mal de taf, faut stocker les dédicaces, les organiser, dégager les plus vieilles etc...

Toffee'look · avril 2010

Fred : Ton système de dédicace super vraiment super mais chez moi le problème et que des que je clic sur Dédicace , il s'ouvre et se referme de suite comme tu la dit plus au ,
sur ton site sais du parfais mais un moyen de mettre que le formulaire ? jais fais un test pour voir avec le code source et sais plus propre !
donc continuons nos recherche !!!

RE-EDIT pour moi impossible d'installer zoombox ?? sa ne fonctionne pas :
le d effilement des msg et le zoom de la zoombox ^^

Frédéric · avril 2010

Oui Toffee'look, laisse tomber lyteframe.

Et Attention de ne pas avoir 2 fois la bibliothèque jquery.js

super_g2 · avril 2010

d'ailleurs, a ta place j'attendrai que Fred trouve une méthode "ultime"

=

ca marche bien via la page dédicace statique en tout cas, comme quoi, je te l'avais dit

plus qu'à limiter le nombre de mots/caractères avec ça par exemple : http://www.lafermeduweb.net/billet/jmaxinput-un-textarea-aux-caracteres-limites-a-la-twitter-652.html

edit : ce n'est pas une page statique, mais un plugin semble-t-il qui sert de formulaire ^^ (mille excuses

)

Toffee'look · avril 2010

ok bon ba j'attends et pour le défilement des article sur ton site Fred sais exactement ce que je veux !
ha la la quand j'en connaitrai plus au niveau de plux sa sera cool

Frédéric · avril 2010

Non tu as raison c'est bien une page statique, mais ce qui me gêne même si cela fonctionne et d'avoir de réintégrer le header & footer.

A voir pour n'avoir juste un seul fichier à inclure et non une page, d'en faire un plugins en sommes comme tu le dis.

Pour la limitation des nombres de caractère, cela ce fais directement dans l'appel de lastComList avec #com_content(150)

super_g2 · avril 2010

ouaip, je l'avais zappé celui-là de comlist ^^

beau boulot, presque parfait je pense pour notre ami Toffee'Look

Toffee'look · avril 2010

ouai et surtout pour toute les autre web radio qui utiliserons pluxml comme cms pour leur site !!
merci a vous !!

Nouvelle réalisation | WebRadio

Réponses