sommaire
indexdébutpage précédentepage suivante
imprimer
envoyer
marquer
Panneau d'affichage: <valves>, pour des actualités, des annonces, des événements, des publications... |
L'élément <valves> permet d'insérer dynamiquement des informations au sein d'une page web. Ces informations peuvent être de différentes natures et peuvent provenir de différentes sources. Il peut s'agir:
Cet élément <valves> est notamment utilisé dans la homepage du site de l'université afin d'afficher en permanence les deux ou trois actualités les plus récentes de l'ULB. Ces actualités sont extraites d'Act'ULB, la plate-forme utilisée par le Service communication pour gèrer les actualités institutionnelles. Elle fonctionne grâce à l'application Babelbox. Cette application est à votre disposition pour gérer vos propres actualités (la Cellule web pourra vous fournir de plus amples informations à son sujet). Act'ULB et Babelbox ne sont que deux exemples de sources qui peuvent alimenter une page web en actualités ou autres informations. Les informations insérées dans une page seront mises à jour automatiquement au moment où l'internaute affiche la page en question. Il n'est donc plus nécessaire de générer celle-ci dans Sitemanager afin de la maintenir à jour. De plus, si la page reste affichée longtemps dans le navigateur, ces informations seront renouvelées à intervalles réguliers sans devoir rafraîchir la fenêtre du navigateur. On peut donc se servir de ce système de valves pour diffuser rapidement et facilement des informations de toute sorte (des annonces, des alertes...). IntroductionTrès peu de balises xml sont nécessaires afin de sélectionner les informations et indiquer comment elles doivent s'afficher. Néanmoins les possibilités sont nombreuses et une certaine expérience est nécessaire pour mettre en oeuvre ces balises. N'hésitez pas à faire appel à la Cellule web ou au Service communication pour vous aider à les utiliser. Les sources des informationsLes informations peuvent provenir de différentes sources. Il peut s'agir:
Plusieurs sources peuvent servir à alimenter les valves. Cela permet de combiner les informations provenant de ces différentes sources dans une mise en page homogène. A contrario, la même source peut être utilisée plusieurs fois en utilisant une mise en page différente (ou légèrement différente) pour mettre en évidence certaines informations (les actualités "à la Une", par exemple, qui seront différenciées des autres actualités). La sélection des informationsSi les sources offrent une méthode de classement des informations en catégories, on peut sélectionner celles-ci dans l'une ou l'autre de ces catégories. On peut également les sélectionner sur base de leur identificateur, d'un ou plusieurs mots-clés ou d'un code. Dans le cas de Babelbox, d'autres éléments peuvent servir à cette sélection: le public visé, le classement ou la priorité. Par exemple, on pourrait dans Babelbox gérer une actualité dont l'identificateur est "horaire" et dont le texte contiendrait les heures d'ouverture d'un service ouvert aux étudiants. Pour diffuser ces heures d'ouverture, il suffit d'insérer dans vos pages cette actualité particulière, grâce à son identificateur. Les informations à afficherLe nombre maximum d'informations à afficher est paramètrable. On peut également paginer les informations grâce à des onglets, comme dans une présentation. Finalement, on peut sélectionner les données à afficher parmi toutes celles qui sont disponibles pour chaque information: le titre, l'aperçu, le contenu, la date de publication, la date de modification, l'auteur, les catégories, la source, etc. La mise en page des informationsLe style du bloc d'informations peut être choisi, ainsi que l'utilisation d'une puce ou d'une numérotation devant chaque information et une ligne de séparation entre les actualités. On peut également choisir le style de chaque actualité. Cela permet, par exemple, de mettre en évidence certaines informations par rapport à d'autres. On peut également afficher un aperçu de l'information et, lorsque on clique dessus, faire apparaitre une version plus étendue de celle-ci. |
Exemples |
L'exemple ci-contre va chercher un maximum de 3 actualités dans une source Babelbox. C'est l'attribut maximum qui donne le nombre d'actualités à afficher (au maximum). S'il n'est pas présent, toutes les actualités seront affichées. La mise en page choisie utilise le style class1 placé sur le bloc d'actualités. |
Exemple <valves maximum="3" style="class1"> <source-babelbox box="1" type="actualité"/> </valves> loading...ajax1 |
L'exemple ci-contre va chercher un maximum de 3 actualités dans le flux RSS de la La Une du journal Le Soir. On a choisi ici de numéroter les actualités et d'utiliser une ligne de séparation entre celles-ci. |
Exemple <valves maximum="3" style="voile" séparateur="colorBar2" numérotation="I."> <source-rss href="http://www.lesoir.be/feed/La Une/destination_une_block"/> </valves> loading...ajax2 |
L'exemple ci-contre utilise trois sources:
Remarquez l'utilisation de l'attribut maximum au niveau des trois sources. Il évite d'aller puiser les trois informations dans la première source au détriment des deux autres, ce qui assure une bonne répartion des trois sources dans les informations affichées. On sélectionne également, grâce à <affichage> les données à afficher: le titre, la date de publication, le titre de la source, la vignette (insérée au sein du texte à gauche) et le contenu de l'information. Vous pouvez également modifier certaines informations, comme dans cet exemple où le titre de la source Babelbox a été changé en Act'ULB. |
Exemple <valves maximum="3" style="class1">
<affichage>
<titre/>
<groupe>
<date-publication/>
<sep puce="disque"/>
<titre-source/>
</groupe>
<vignette position="gauche-texte"/>
<contenu/>
</affichage>
<source-babelbox box="1" maximum="1" type="actualité">
<titre>Act'ULB</titre>
</source-babelbox>
<source-rss href="http://www.lesoir.be/feed/Actualité/Belgique/..." maximum="1"/>
<source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" maximum="1"/>
</valves>loading...ajax3 |
Dans cet exemple, le bloc d'informations ne possède pas de style, mais chaque informations en possédera un de manière individuelle. Ce style est égal à noteGrise. C'est l'élément <affichage> qui permet de choisir le style en question. Il permet également de choisir ce qui doit être affiché pour chaque information. Ici, le titre, la vignette, les catégories mises en évidence, l'auteur, la date de publication et le contenu de l'actualité. |
Exemple <valves maximum="3">
<affichage style="noteGrise">
<titre/>
<groupe>
<évidence>
<catégories/>
</évidence>
<auteur préfixe="Par "/>
<sep-texte>, </sep-texte>
<date-publication préfixe="le "/>
</groupe>
<vignette position="gauche-texte"/>
<contenu/>
</affichage>
<source-xml href="http://www.ulb.ac.be/cache/news-test1.xml"/>
</valves>loading...ajax4 |
Ici, toutes les actualités de Babelbox sont affichées et présentées 4 par 4 dans des onglets différents. La transition pour passer d'un onglet à l'autre est égale à "fondue1Lente". On a choisi d'afficher d'abord un résumé de l'actualité, contenant le titre, la vignette réduite à 30x30 pixels, et l'aperçu de l'actualité. En cliquant sur le résumé, on fait apparaître l'actualité complète. Dans l'actualité complète, les images sont automatiquement redimensionnés à la taille 100x100, une bordure et une ombre leurs sont automatiquement ajoutées. On affichera le titre, les catégories mises en évidence, l'auteur, la date de publication, le contenu, le titre de la source et un lien vers plus d'informations. |
Exemple <valves bords="arrondis" délai-transition="manuel" effet-transition="fondue1Lente"
maximum-par-onglets="4" onglets="détachés" style="class7">
<affichage cible="ouvrirFermer" refermable="oui" style="class1+titre">
<résumé>
<titre/>
<vignette hauteur="30" largeur="30" position="gauche-texte">
<bordure taille="1"/>
</vignette>
<aperçu/>
</résumé>
<titre/>
<groupe>
<évidence><catégories/></évidence>
<auteur préfixe="Par "/>
<sep-texte>, </sep-texte>
<date-publication préfixe="le "/>
</groupe>
<vignette hauteur="100" largeur="100" position="gauche-texte">
<bordure taille="1"/>
<ombre position="inférieur-droit"/>
</vignette>
<contenu/>
<groupe>
<titre-source/>
<lien/>
</groupe>
</affichage>
<source-babelbox box="1" type="actualité"/>
</valves>loading...ajax5 |
