Accordion listing

Accordion listing est un modèle de présentation / architecture de l’information écrit en HTML/CSS utilisant l’ergonomie de l’accordéon (cf. Js accordion) pour construire pages et contenus web structurés en listant des éléments "enfant" : il peut s’agir d’une page listant un sommaire, d’une liste d’articles d’un weblog, d’une liste de fichiers et répertoires, d’une liste de commandes pour une interface... (voir démos). L’intérêt de ce modèle est de fusionner menu et contenu, sa conception peut se résumer ainsi : " Le menu c’est le contenu, le contenu c’est le menu "

Respectueux du "HTML bas niveau", la page reste accessible et visuellement structurée sans javascript ni css, perdant cependant tout l’intérêt ergonomique du modèle.

Accordion listing is a simple model writing in HTML/CSS using the accordion ergonomic property to build user-interfaces and web structured pages listing "child items" : there may be a web page listing a summary, a list of weblog category posts, a list of files and directories, a list of command for an user-interfaces...(see case studies). Conform XHTML / CSS, page remain accessible and visually structured without javascript or css.

1. Top menu ( global menu) / menu d’entête , menu global du site
2. website name or logo / nom du site ou logo du site
3. "Sections" list of main page on your website / Liste des sections : les pages principales de votre site
4. Breadcrumbs / Fil d’ariane
5. logo or visual information for main content / Logo ou information visuelle correspondant au contenu principal de la page
6. main content title (page title) / Titre du contenu principal (càd titre de la page
7. main content short description / Courte introduction, description du contenu de la page
8. List of child content items (hide by default, only titles, this is the accordion ergonomic property !) / Liste des contenus "enfant" (cachés par défaut sauf les titres, c’est le principe de l’accordéon !)
9. A sub-child items / Exemple d’un contenu "enfant" imbriqué
10. page footer content / contenu de pied de page

Téléchargez le modèle de présentation HTML/CSS avec son code source "propre" et commenté

Download HTML/CSS template with clean and commented source code

Télécharger accordion_listing v8.5 (Zip - 118.3 ko)

Le modèle utilise pour l’ergonomie la librairie javascript Jquery et le plugin accordion. Testé (sur pc uniquement) et fonctionnel avec les navigateurs récents (IE6>, firefox2>). Si vous rencontrez des problèmes d’affichages sur d’autres systèmes (Mac, opera, safari ...) merci de m’en informer (cf support et contact). Pour reporter des problèmes avec accordion utilisez la "jQuery UI discussion list" en insérant [accordion] dans le sujet de votre post. D’autres librairies et systèmes d’accordéon existent par exemple, Mootools ou Accordion for Prototype & scriptaculous lib

The model uses for ergonomics is the javascript Jquery lib and the plugin accordion. Tested (on pc only) and functional with recent browsers (IE6>, firefox2>). If you experience problems on other systems (Mac, Opera, Safari...) please report (see contact and support). If you have any troubles with accordion JQuery use the "jQuery IU discussion list" putting [accordion] into the subject of your post. You can find (and test) any other JS libs and accordion systems, for example, Mootools or Accordion & Prototype scriptaculous lib

• Accordion listing - CC by ikou©2008
• Jquery, librairie Javascript :© 2008 John Resig and the jQuery team. MIT and GPL licenses
• Jquery Accordion plugin : Jörn Zaefferer© MIT and GPL licenses

Questions, problèmes, rectifications à propos du modèle : contacter directement ou utiliser le forum de commentaires.

If you have any question, trouble, suggestion about the model you can contact me or use this commentaries forum.

Démos et étude de cas : interface de gestion de bugs & page de présentation d’un logiciel

plus »

Tomboy

Logiciel de prise de note rapide.

plus »

Flyspray- The bug killer !

Démonstration d’une page aperçu général pour un gestionnaire de bugs/projets.

plus »