Forums GAMERGEN
[DOC] Créer un portail, le Javascript et la radio
Règles du forum
Avant de poster votre sujet lié au jailbreak de votre console. Merci de consulter l'univers undeground PSP.
Cette section reste soumise aux règles du forum, aucun contenu warez, illégal et dangereux n'est toléré.
Avant de poster votre sujet lié au jailbreak de votre console. Merci de consulter l'univers undeground PSP.
Cette section reste soumise aux règles du forum, aucun contenu warez, illégal et dangereux n'est toléré.
[DOC] Créer un portail, le Javascript et la radio
_______________Créer un portail
_______________________Part 1. Javascript
Préface
les deux parties de ce tutoriel sont une suite au premier tutoriel rédigé par Naoki, qui contient les programmes a utiliser , les bases du HTML , le CSS.
En ce qui nous concerne nous passerons a l'étape suivante qui est le java-script , et son utilisation dans le mode radio. Il se peut que vous vous perdiez en lisant les lignes de java-script , si c'est le cas , ne copiez-coller pas bettement le code dans votre portail , car vous n'y comprendrez rien , lorsqu'un dev (surtout moi ^^) lira le code source de votre portail et verra qu'il n'y a eu qu'un simple copier-coler du tutoriel sa donnera pas forcement envie d'aider ... donc chercher a comprendre avant de copier , et si vous ne comprenez pas : poser une question ! je suis la pour vous aider , mais pas pour faire le travail a votre place.
1. Les bases du java-script
1.0 ou mettre du javascript ?
il existe plusieurs possibilité pour ajouter du javascript dans votre document HTML :
la première consiste a écrire le java-script entre les balises <script></script>:
la troisième façon consiste a écrire le script directement dans la balises souhaitée (attention toute les balises ne le supporte pas)
vous pouvez aussi essayer : onmouseout onmouseover onmousedown
1.1 les variables :
les variables sont des petite cases qui peuvent contenir : du texte ou des nombres.
pour déclarer (ajouter) une variable il vous suffi d'écrire :
une fois une variable déclarer vous pouvez modifier son contenu avec :
le texte contenu dans maVariable a ete remplacé
pour ajouter a la suite faite comme ceci :
maVariable contient le deuxième contenu suivi du troisième contenu.
1.2 les fonctions :
les fonctions sont des zone de codes qui ne sont executer que lorque elles ont invoquées.
pour créer une fonction faite comme ceci :
1.3 petit truc utiles :
vous voulez connettre la valeure d'une variable pour savoir si tout c'est bien passé ? pas de probleme ! voila quelque astuce pour les afficher :
attention la fonction write ne marche plus lorsque la page est afficher , donc seul les methodes 1 et 2 marchent (voir chap 1.0)
et dans notre HTML nous pouvons ajouter dans le body:
en règle général les fonction reçoivent des paramètres , font leur boulot et renvoi une valeur une fois qu'elles ont fini a par ce ya rien a comprendre...
je vais pas m'allonger sur les array , la programmation orienté objet, les expressions régulière etc... car je vous sent prêt a tombé par terre ^^
5. Le DOM
C'est quoi ?
Le Document Object Model est la structure du document (html) qui sera générée par le navigateur internet. cette structure est en faite une arborescence regroupant tout les objet de votre page html
Et le Javascript dans tout ca ?
Le javascript, lui, permet de modifier dynamiquement la structure DOM , la PSP est assez mauvaise dans ce domaine mais on peut quand même faire de bonne chose avec ...
Accéder a un objet du DOM
il existes 3 façons de d'accéder a un objet :
supposons un div :
la première méthode consiste a rechercher TOUT les div du document :
la deuxième consiste a scanner la page a la recherche d'un objet don l'attribut name vaut monDiv :
dernière méthode , la plus connue et la plus sure :
Modifier a un objet du DOM
vous avez donc récupérer l'adresse (le pointeur) de votre objet et vous l'avez stoker dans la variable monElement , on va pas rester comme sa ! on va modifier les propriétés de monElement ! mais ... avan cela je vous conseil d'ajouter a Firefox le plugin "FireBug" il vous permettra d'avoir une vue globale sur toute l'arborescence du DOM de votre page HTML [apercu]
ouvrez donc votre page HTML de portail avec firefox , cliquez sur le petit insecte en a droite dans la barre de statu de firefox , choisissez HTML pour le panneau lateral de gauche, et DOM pour celui de droite , vous verrez dans ce dernier les atributs de l'element selectionnez dans le tableau de gauche , prenons un exemple :
je sélectionne l'image de mon avatar , je vois apparaitre dans le panneau de droite la liste des propriétés de la balise img (height , with , src):
si votre propriétée est dans une categorie (par exemple pour style) , vous devrez y acceder avec : nomDeLaCategorie.maPropriétée , soit concrètement :
nous connaissont donc maintenant tout les propriétée de notre objet nous voullon donc lui assigner une valeur (ou la modifier) voici une exemple theorique :
et si vous vouler afficher un objet il vous suffi d'utiliser la propriétée style.visibility et de la mettre a show ou hidden selon si vous voulez le cacher ou l'afficher
6. La Radio
- télécharger le PRScompiler
nous y voila ! la radio ... si vous avez tout lut vous (surtout le javascript) verrez c'est tres facile !
6.1 - créer le PRS
créez un fichier .xml qui contiendra toute les info de votre radio :
maintenant déplacer votre XML sur prscompiler.exe et HOP votre fichier PRS est apparue ! pas trop dur ?
passons au chose sérieuses ...
6.2 créer le fichier HTML de la radio
pour une liste complette des fonctions du RadioPlayer PSP passez voir ici :
http://psp-online.net/ultimate-portal/UP4PSP/radio/
vous y trouverez aussi des exemples ...
/!\ a savoir /!\
quand le navigateur internet est lancé depuis l'onglet radio le module radio n'est pas actif !! il nous faut donc l'activer avec une balise HTML qu'on pet placer n'importe ou :
<object name="psp" type="application/x-psp-extplugin"></object>
voila ! maintenant le navigateur peut lire des stream audio etc...
nous allons voir dans les second post les fonctions javascript capable de controler l'objet x-psp-extplugin et c'est promis , on va s'eclater
_______________________Part 1. Javascript
Préface
les deux parties de ce tutoriel sont une suite au premier tutoriel rédigé par Naoki, qui contient les programmes a utiliser , les bases du HTML , le CSS.
En ce qui nous concerne nous passerons a l'étape suivante qui est le java-script , et son utilisation dans le mode radio. Il se peut que vous vous perdiez en lisant les lignes de java-script , si c'est le cas , ne copiez-coller pas bettement le code dans votre portail , car vous n'y comprendrez rien , lorsqu'un dev (surtout moi ^^) lira le code source de votre portail et verra qu'il n'y a eu qu'un simple copier-coler du tutoriel sa donnera pas forcement envie d'aider ... donc chercher a comprendre avant de copier , et si vous ne comprenez pas : poser une question ! je suis la pour vous aider , mais pas pour faire le travail a votre place.
1. Les bases du java-script
1.0 ou mettre du javascript ?
il existe plusieurs possibilité pour ajouter du javascript dans votre document HTML :
la première consiste a écrire le java-script entre les balises <script></script>:
- Code: Select All Code
<html>
<head>
<script>mon code java-script</script>
</head>
<body>
cette page contient un bout de java-script
</body>
</html>
- Code: Select All Code
<script src="file:/PSP/COMMON/monPortail/script.js"></script>
la troisième façon consiste a écrire le script directement dans la balises souhaitée (attention toute les balises ne le supporte pas)
- Code: Select All Code
<input type="button" value="test" onmouseclick="ici mon code javascript"/>
<a href="javascript:ici mon code javascript">test</a>
<a href="#" onclick="ici mon code javascript">test</a>
vous pouvez aussi essayer : onmouseout onmouseover onmousedown
1.1 les variables :
les variables sont des petite cases qui peuvent contenir : du texte ou des nombres.
pour déclarer (ajouter) une variable il vous suffi d'écrire :
- Code: Select All Code
var maVariable = "le contenu";
une fois une variable déclarer vous pouvez modifier son contenu avec :
- Code: Select All Code
maVariable = "le deuxième contenu";
le texte contenu dans maVariable a ete remplacé
pour ajouter a la suite faite comme ceci :
- Code: Select All Code
maVariable += "le troisième contenu";
maVariable contient le deuxième contenu suivi du troisième contenu.
1.2 les fonctions :
les fonctions sont des zone de codes qui ne sont executer que lorque elles ont invoquées.
pour créer une fonction faite comme ceci :
- Code: Select All Code
function maFonction(){
ici le code de ma fonction
}
1.3 petit truc utiles :
vous voulez connettre la valeure d'une variable pour savoir si tout c'est bien passé ? pas de probleme ! voila quelque astuce pour les afficher :
- Code: Select All Code
var maVariable = "test";
write( maVariable );
alert( ma variable );
attention la fonction write ne marche plus lorsque la page est afficher , donc seul les methodes 1 et 2 marchent (voir chap 1.0)
script.js Wrote:// ceci est un commentaire
/* ceci est aussi un commentaire */
var moi = "test"; //je défini une variable moi qui contient la valeur test " " pour indiquer que c'est du texte
var moi2 = moi; // la je dit que moi2 prend la même valeur que moi (d'où l'intérêt de mettre des "" lorsque c'est une chaine de caractere et pas lorsque c'est une autre variable)
function go(){ // je crée la fonction go()
alert("voici du texte"); // on affiche un message "voici du texte"
alert(moi); // on affiche un message ayant pour valeur le contenu de moi
alert(moi2) // .... moi2
}
fonction go2(argument){ // cette fonction peut recevoir un argument
alert("argument"); // l'erreur basique est de mettre des "" mais argument est une variable ... donc pas de ""
alert(argument); // ici on affiche la valeur recu par la fonction au traver de argument
alert("ma fonction a recu comme argument" + argument) // on affiche du texte suivit de la variable
}
function repondeuse(){ // cette fonction ne fait rien ne recois rien ... elle ne fait que répondre
alert('je suis répondeuse enchantée'); // on lui fait afficher un message quand meme ...
return 'du texte'; // ici elle renvoi du texte , mais elle pourai renvoyer un argument
}
et dans notre HTML nous pouvons ajouter dans le body:
index.html Wrote:<a href="#" onclick="go()">ma fonction go()</a>
<a href="#" onclick="go2()">go2() sans paramètre</a>
<a href="#" onclick="go2(moi)">go2() avec comme paramètre la variable moi</a>
<a href="#" onclick="alert(repondeuse())">repondeuse()</a> on affiche ce que renvoi repondeuse apres qu'elle est fait son boulot ...
en règle général les fonction reçoivent des paramètres , font leur boulot et renvoi une valeur une fois qu'elles ont fini a par ce ya rien a comprendre...
je vais pas m'allonger sur les array , la programmation orienté objet, les expressions régulière etc... car je vous sent prêt a tombé par terre ^^
5. Le DOM
C'est quoi ?
Le Document Object Model est la structure du document (html) qui sera générée par le navigateur internet. cette structure est en faite une arborescence regroupant tout les objet de votre page html
Et le Javascript dans tout ca ?
Le javascript, lui, permet de modifier dynamiquement la structure DOM , la PSP est assez mauvaise dans ce domaine mais on peut quand même faire de bonne chose avec ...
Accéder a un objet du DOM
il existes 3 façons de d'accéder a un objet :
supposons un div :
- Code: Select All Code
<div id="maDiv" name="monDiv">un peut de texte</div>
la première méthode consiste a rechercher TOUT les div du document :
- Code: Select All Code
var monElement = document.getElementsByTagName('div')[0]
la deuxième consiste a scanner la page a la recherche d'un objet don l'attribut name vaut monDiv :
- Code: Select All Code
var monElement = document.getElementsByName('monDiv')[0];
dernière méthode , la plus connue et la plus sure :
- Code: Select All Code
var monElement = document.getElementById('maDiv');
Modifier a un objet du DOM
vous avez donc récupérer l'adresse (le pointeur) de votre objet et vous l'avez stoker dans la variable monElement , on va pas rester comme sa ! on va modifier les propriétés de monElement ! mais ... avan cela je vous conseil d'ajouter a Firefox le plugin "FireBug" il vous permettra d'avoir une vue globale sur toute l'arborescence du DOM de votre page HTML [apercu]
ouvrez donc votre page HTML de portail avec firefox , cliquez sur le petit insecte en a droite dans la barre de statu de firefox , choisissez HTML pour le panneau lateral de gauche, et DOM pour celui de droite , vous verrez dans ce dernier les atributs de l'element selectionnez dans le tableau de gauche , prenons un exemple :
je sélectionne l'image de mon avatar , je vois apparaitre dans le panneau de droite la liste des propriétés de la balise img (height , with , src):
- Code: Select All Code
si votre propriétée est dans une categorie (par exemple pour style) , vous devrez y acceder avec : nomDeLaCategorie.maPropriétée , soit concrètement :
- Code: Select All Code
style.visibility
nous connaissont donc maintenant tout les propriétée de notre objet nous voullon donc lui assigner une valeur (ou la modifier) voici une exemple theorique :
- Code: Select All Code
<div name="maDiv" id="monDiv">coucou !</div>
<a href="javascript:document.getElementById('monDiv').innerHTML='salut !'">modifier le innerHTML du div via l'ID</a>
<a href="javascript:document.getElementsByName[0]('maDiv').innerHTML='sa va ?'">modifier le innerHTML du div via le name</a>
<a href="javascript:document.getElementsByTagName[0]('maDiv').innerHTML='bien et toi ?'">modifier le innerHTML du div via le tag name</a>
et si vous vouler afficher un objet il vous suffi d'utiliser la propriétée style.visibility et de la mettre a show ou hidden selon si vous voulez le cacher ou l'afficher
6. La Radio
- télécharger le PRScompiler
nous y voila ! la radio ... si vous avez tout lut vous (surtout le javascript) verrez c'est tres facile !
6.1 - créer le PRS
créez un fichier .xml qui contiendra toute les info de votre radio :
oui, vous pouvez mettre des image png 64*64 pour votre radio ^^radio.xml Wrote:<?xml version="1.0" encoding="UTF-8"?>
<radioplayer title="ma radio" icon="1.png" focus_icon="2.png">
<info author="moi" radioplayer_url="file:/index.html" homepage_url="http://google.fr" comment="ma première radio" copyright="CC:by-nc-sa" />
</radioplayer>
maintenant déplacer votre XML sur prscompiler.exe et HOP votre fichier PRS est apparue ! pas trop dur ?
passons au chose sérieuses ...
6.2 créer le fichier HTML de la radio
pour une liste complette des fonctions du RadioPlayer PSP passez voir ici :
http://psp-online.net/ultimate-portal/UP4PSP/radio/
vous y trouverez aussi des exemples ...
/!\ a savoir /!\
quand le navigateur internet est lancé depuis l'onglet radio le module radio n'est pas actif !! il nous faut donc l'activer avec une balise HTML qu'on pet placer n'importe ou :
<object name="psp" type="application/x-psp-extplugin"></object>
voila ! maintenant le navigateur peut lire des stream audio etc...
nous allons voir dans les second post les fonctions javascript capable de controler l'objet x-psp-extplugin et c'est promis , on va s'eclater
Dernière édition par kba le 05 Fév 2010, 16:40, édité 12 fois.
-
biscottealacrevette
Gamer Hardcore
- Messages: 750
- Inscription: 28 Jan 2010, 20:54
Re: [TUTO] - Créer un portail+radio (pro)
donc maintenant que vous maitrisez comme un dieux le JavaScript on passe au chose serieuse :
avant de lire un stream il nous faut regler le son au max ! avec :
vous aurez remarquez que les 255 sont sans " " car ce ne sont pas des chaines mais des valeures
bref , une fois notre son a fond on lance la lecture du stream :
il est possible de mettre en deuxieme argument le userAgent du player :
ici on se fait passer pour VLC ...
donc pour résumer sa nous donne :
maintenant mettons tout ca dans une fontion pour eviter d'avoir a tour retaper a chaque fois :
et pour ce simplifier encore plus la vie :
voila ! vous avez créer votre radio player en HTML en utilisant un peu de Javascript ...
avant de lire un stream il nous faut regler le son au max ! avec :
- Code: Select All Code
psp.sysRadioSetMasterVolume(255);
psp.sysRadioSetSubVolume(255);
vous aurez remarquez que les 255 sont sans " " car ce ne sont pas des chaines mais des valeures
bref , une fois notre son a fond on lance la lecture du stream :
- Code: Select All Code
psp.sysRadioPlayStream("http://mon.site.fr/stream.mp3");
il est possible de mettre en deuxieme argument le userAgent du player :
- Code: Select All Code
psp.sysRadioPlayStream("http://mon.site.fr/stream.mp3","VLC media player");
ici on se fait passer pour VLC ...
donc pour résumer sa nous donne :
<a href="#" onclick="psp.sysRadioSetMasterVolume(255);psp.sysRadioSetSubVolume(255);psp.sysRadioPlayStream("http://mon.site.fr/stream.mp3","VLC media player");">lire</a>
maintenant mettons tout ca dans une fontion pour eviter d'avoir a tour retaper a chaque fois :
<script>
function play(url){
psp.sysRadioSetMasterVolume(255);
psp.sysRadioSetSubVolume(255);
psp.sysRadioPlayStream(url,"VLC media player");
}
</script>
<a href="#" onclick="play('http://mon.site.fr/stream.mp3')">play</a> attention a utiliser des cotes simples lorsque le codes est entre des " ".
et pour ce simplifier encore plus la vie :
<script>
function play(url){
psp.sysRadioSetMasterVolume(255);
psp.sysRadioSetSubVolume(255);
psp.sysRadioPlayStream(url,"VLC media player");
}
</script>
<select onchange="play(this.options[this.selectedIndex].value)">
<option>==liste de stream==</option>
<option value="http://monsite.fr/stream.mp3">monsite</option>
<option value="http://lesite.fr/stream.mp3">lesite</option>
</select>
ici la valeur de option est envoyer a la fonction play() pratique non ?
voila ! vous avez créer votre radio player en HTML en utilisant un peu de Javascript ...
Dernière édition par kba le 23 Mai 2009, 21:20, édité 1 fois.
-
biscottealacrevette
Gamer Hardcore
- Messages: 750
- Inscription: 28 Jan 2010, 20:54
Re: [TUTO] - Créer un portail+radio (pro)
salut, tu as obulier les balises suivantes :
sinon c'est très bien merci pour le tutoriel
<center>
<p align="left">
<p align="right">
<br>
<hr>
sinon c'est très bien merci pour le tutoriel
- urbano25_1
Re: [TUTO] - Créer un portail+radio (pro)
Merci biscotelacrevete , sinon j'arrive pas as comprendre le javascript.
Always Look as Far as Possible!!!
-
napster23
Gamer Pro
- Messages: 214
- Inscription: 29 Juil 2010, 09:24
- Localisation: Annaba,
- Prénom: Fares
- Pays: Algerie
- Sexe: Homme
Re: [TUTO] - Créer un portail+radio (pro)
Passage en post-it, merci à toi.
Par contre, désolé, mais il faut éviter les sondages pour les tuto. Ce n'est vraiment pas utile et ça gêne la visibilité des post-its.
Par contre, désolé, mais il faut éviter les sondages pour les tuto. Ce n'est vraiment pas utile et ça gêne la visibilité des post-its.
-
[Yaourt]
Gamer Or
- Messages: 5724
- Inscription: 20 Mai 2009, 12:13
- Pays: France
Re: [TUTO] - Créer un portail+radio (pro)
je sait mais c'etait pas un sondage au hazars , je voulais connaitre le niveau global des dev du forum pour adapter au mieux et ainsi expliquer du mieux possible sans viser trop haut ... en tout cas merci pour le post-it :)
-
biscottealacrevette
Gamer Hardcore
- Messages: 750
- Inscription: 28 Jan 2010, 20:54
Re: [TUTO] - Créer un portail+radio (pro)
Lien pour le PRS Compiler mort
sinon c'est bizard car quand je met le fichier XML dans le PRS compiler sa me crée un TMP, c'est normal?
problème réglé mais dès que je l'ouvre avec internet explorer il veu que je télécharge le fichier >_<
sinon c'est bizard car quand je met le fichier XML dans le PRS compiler sa me crée un TMP, c'est normal?
problème réglé mais dès que je l'ouvre avec internet explorer il veu que je télécharge le fichier >_<
-
Blakred
Gamer Hardcore
- Messages: 751
- Inscription: 29 Déc 2007, 01:00
- Prénom: Mathieu
- Pays: France
- Sexe: Homme
Re: [TUTO] - Créer un portail+radio (pro)
napster23 Wrote:Merci biscotelacrevete , sinon j'arrive pas as comprendre le javascript.
Le JS est un language orienté objet, comme Python...
Voilà des tutos du Site Du Zer0:
-Tout sur le Javascript
-DHTML et Javascript (sûrement le plus intéressant même si j'ai pas encore lu...)
Un site qui a l'air bien:http://web.developpez.com/
Sinon merci pour ce tuto: je vais pouvoir faire un lecteur maintenant...
EDIT: @Blakred:
Tu devrai prendre Firefox...
PSP 3004 + ChickHEN + CFW 5.03GEN-B for HEN! Merci PSPGen & GENyUS
Logiciel de conversion pour linux, disponible en source, en DEB ou en RPM...
Vous aimez la Programmation et Linux? Passez voir mon site!
Logiciel de conversion pour linux, disponible en source, en DEB ou en RPM...
Vous aimez la Programmation et Linux? Passez voir mon site!
-
Skami 18
Gamer du Dimanche
- Messages: 46
- Inscription: 01 Mai 2009, 17:15
- Localisation: @skami-laptop:~$
Re: [GUIDE] Créer un portail, le Javascript et la radio
Merci pour le tuto bisctotte
-
lauasse
Gamer Hardcore
- Messages: 611
- Inscription: 15 Sep 2012, 11:25
- Pays: France
Re: [GUIDE] Créer un portail, le Javascript et la radio
^^ Saphire tu gere ^^ je viens de piger que pour les icone il falllait faire un tableau MERCI tu es mon dieu ^^ (juste un de tes surnom non?)
Ps: moi c'est $atYan ^^ et un question!! pk les portail de du style Kersamhome et Seven machin ressemble au tien?
Ps: moi c'est $atYan ^^ et un question!! pk les portail de du style Kersamhome et Seven machin ressemble au tien?
- Satyan78 Gamer Débutant
- Messages: 6
- Inscription: 21 Mar 2009, 23:22
Re: [GUIDE] Créer un portail, le Javascript et la radio
salu $atYan ^^ si un concept ou une création est reprise par la communauté c'est qu'elle a du potentiel en tout cas c'est bon signe ^^
une fois que tu a bien compris les bases du HTML je te conseil de continuer sur le CSS puis de finir avec le JavaScript (qui est le langage web client le plus ardu)
une fois que tu a bien compris les bases du HTML je te conseil de continuer sur le CSS puis de finir avec le JavaScript (qui est le langage web client le plus ardu)
-
biscottealacrevette
Gamer Hardcore
- Messages: 750
- Inscription: 28 Jan 2010, 20:54
Re: [GUIDE] Créer un portail, le Javascript et la radio
j'aurai bien essayé mais je suis pas en CF.
hs : c'est rab&boy celui de UP
hs : c'est rab&boy celui de UP
-
rapboy_49
Gamer Hardcore
- Messages: 611
- Inscription: 16 Juil 2009, 16:25
- Localisation: GPS, Tournez à gauche.
- Pays: France
20 messages
• Page 1 sur 2 • 1, 2