JeuWeb - Crée ton jeu par navigateur
optimisation de mon futur tutorial - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : optimisation de mon futur tutorial (/showthread.php?tid=837)

Pages : 1 2 3


RE: optimisation de mon futur tutorial - Seren - 21-02-2007

Alors là je suis vraiment impressionné par ta démonstration Roworll...


RE: optimisation de mon futur tutorial - Roworll - 21-02-2007

C'est surtout le XSL qui impressionne.
J'ai peut être oublié de préciser mais avec ça, on peut avoir une profondeur infinie (merci la récursivité).

Je me suis servi d'un système similaire pour faire une Faq sur un site.

A partir d'un XML qui contient la Faq proprement organisée, j'ai ressorti une table des matières indentée, le contenu de la Faq et bien sur les liens internes sur la page (index -> contenu)


RE: optimisation de mon futur tutorial - Sephi-Chan - 21-02-2007

Damned c'est trop pratique, ça évite de se faire chier avec PHP pour afficher ou pas les éléments parents -_- !
Par contre le JS ne fonctionne pas sur Opéra (ce lien mène à un screen du message d'erreur) Sad mais j'ai quand même pu l'apprécier sur IE et FF Smile.

Comment as-tu assimiler tout ça en XSL ? As-tu des conseils de sites, livres, etc. ?

Autre question : Quand on affiche la source, on garde du XML, genre <nom id=6> et tout. Y a-t-il un moyen pour vraiment avoir du xHTML en sortie (même dans la source) ?


Sephi-Chan, need!


RE: optimisation de mon futur tutorial - Roworll - 21-02-2007

Opera pose en effet encore quelques problèmes avec le XSL.
Leur processeur n'est pas super au point.
Par exemple, il fait sauter les HTMLCollections associées aux Forms (pas terrible pour un contrôle des données en JS)
Le problème sur la page de démo est que Opera est incapable de trouver correctement les nextSibling suite à la transformation XSL. La même page en 100% HTML fonctionne très bien sous Opera.

J'ai appris tout ce que je sais en XSL en faisant le tours de site Web (principalement le http://www.w3schools.com/xsl) et en faisant des tests, plein de tests.
J'en découvre encore d'ailleurs. la dernière révélation étant la possibilité de faire des requêtes "imbriquées" dans le XSL lui même.

Je m'explique :
Code PHP :
<?php 
<xsl:for-each select="/page/members/member[class=/page/classes/class[@type=$type]]" />
On part d'une requete qui affiche toutes les classes d'un type donné : /page/classes/class[@type=$type]
A partir de ce résultat, on filtre les membres ayant cette classe. : /page/members/member[class=...

Que du bon...

Pour la source de la page, par défaut, on voit apparaître le XML.
IE lui est même parfois incapable d'afficher quoi que ce soit.
Les outils de développement de FF par contre peuvent afficher la source générée de la page (le XHTML donc).
Cela nécessite l'installation du plugin correspondant.

Au pire, on peut toujours se consoler avec l'explorateur DOM qui montre correctement la structure de la page générée.


RE: optimisation de mon futur tutorial - Sephi-Chan - 21-02-2007

Oui oui mais je parle d'avoir carrément le code source en HTML au lieu du XML.

En tout cas merci pour ton lien, j'irais voir. Le système de requêtes m'intrigue, j'y comprend rien avec les chemins ^^. Déjà que DOM c'était pas mon fort (surtout à cause des incompatibilités)...

En fait c'est plus utilise que je ne le pensais XML/XSL... Et moi qui me limitait à croire que c'était juste à la mode pour "remplacer" le couple xHTML/CSS... Je m'étais fourvoyé Smile).

Sephi-Chan


RE: optimisation de mon futur tutorial - X-ZoD - 21-02-2007

il est vrai que la demo est pas mal du tout
car moi je me demandais si jallais reussir a fair les noeuds deroulant ...


RE: optimisation de mon futur tutorial - Sephi-Chan - 22-02-2007

En essayant de m'exercer chez moi je me suis rendu compte que la feuille XSL présentée ici ne fonctionnait pas du tout en l'état (le nom des balises n'a pas l'air identique au XML).

Roworll, si tu me lis, pourrais-tu eclaircir quelques points s'il te plaît ?

  1. A quoi sert ce fragment ?
    Code :
    <xsl:import href="reference.xsl" />

  2. A quoi servent ces éléments ?
    Code :
    <xsl:template name="node">
        <xsl:param name="name" />
        <xsl:param name="parent" />
        <xsl:param name="level" />

  3. D'où viennent ces $ ? Que signifient-ils ?
    Code :
    <xsl:if test="count(//nom[@parent=$parent])>0">

  4. Que signifie cette ligne ?
    Code :
    <ul class="ul_{$level mod 2}">

Je sais que ça fait beaucoup de questions mais j'aimerai vramient comprendre les ficelles de ce langage.

Je te remercie d'avance, Wink


Sephi-Chan


RE: optimisation de mon futur tutorial - Roworll - 22-02-2007

Il est possible en effet que cela ne corresponde plus. J'ai fait quelques changements à la volée et la version online est différente du code ici.

Rentrons dans le détail :
Code :
<xsl:import href="reference.xsl" />
Ceci permet de faire un include d'une feuille externe. Pour ma part, je mets dans ce genre de feuilles des templates réutilisables sur tout le site

Code :
<xsl:template name="node">
    <xsl:param name="name" />
    <xsl:param name="parent" />
    <xsl:param name="level" />
Ce sont justement les fameux templates.
Il en existe en gros deux sortes.
- Les templates 'Fonction' qui prennent des paramètres (comme celui au dessus).
- Les templates 'Nommés' qui s'appuient sur une branche spécifique de ton arborescence XML
Il n'y a jamais de retour de valeur avec les templates.
Dans le code exposé, le template s'appelle "node" et prends trois paramètres : name, parent et level

Code :
<xsl:if test="count(//nom[@parent=$parent])>0">
Les $ sont utilisés par les variables et les paramètres. Tout paramètre ou variable déclaré peut être invoqué avec la syntaxe $nomduparam.
Point intéressant : un paramètre peut contenir une valeur fixe ou toute une branche de l'arbre XML.

Code :
<ul class="ul_{$level mod 2}">
{ } est un substitut pour xsl:value-of
Cependant, il ne s'utilise que sur les attributs en ligne des tags HTML.
La syntaxe équivalente (<ul class="ul_<xsl:value-of select="$level mod 2" />"> ) pose un problème d'interprétation au processeur XSL car le select utilise un délimiteur " identique au délimiteur d'attribut.
{ } permet donc de s'affranchir de ce problème.

Pour info, j'essaye de faire un petit tuto XSL pour la réalisation d'une FAQ.


RE: optimisation de mon futur tutorial - Roworll - 22-02-2007

Je viens de remettre a jours le code que j'expose dans mon message d'origine.
J'ai aussi corrigé le problème lié à Opera.

Le problème vient du fait que après une transformation XSL, Opéra considère chaque lettre d'un texte comme un élément (sibling) d'ou l'incompatibilité avec le code.

Il a sufft d'enfermer l'élément dans un <span> et adieu le problème.

N'oubliez pas de faire CTRL+R pour forcer le rechargement de la dernière version.


RE: optimisation de mon futur tutorial - X-ZoD - 22-02-2007

personne veut maider pour une version php ?