Vous pouvez enregistrer votre don depuis cette page directement...

Vous aussi...

Faites un lien sur vos sites vers le Téléthon 2011

Code HTML pour relai web

<a href="https://don.telethon.fr/?R2D2OM=&R2D2PAR=&idm=28675&ido=621">Faites un don web pour le Téléthon 2011</a>

A visiter :

• @Telethon_France
• Telethon sur Facebook

C'est un code yacs dynamique possédant l'avantage d'interpréter l'intégralité des données d'un article, y compris les surcouches overlay, contrairement à la fonctionnalité d'affichage native par l'accueil.

" Un sondage est en fait un overlay sur un article, et index.php, qui affiche l'article de couverture, ne fait pas appel à l'overlay de ce dernier, juste à son texte de description (du moins pour le moment). "

Le code yacs, lui, charge aussi le view text de l'overlay...

Lorsque vous administrez le système, vous naviguez dans le sous-répertoire /control/ de votre installation. Vous pouvez donc exclure ces démarches de votre audit GG analytics. Ce qui vous permettra d'éviter ce genre de résultats d'audit de trafic... Résultats non filtrés, c'est bad !

1° Pour ce faire rendez vous dans votre espace d'audit GG analytics, puis "modifier" le profil du site. Modifier un profil de site

2° Descendez jusqu'au module d'ajout de filtre Enregistrer un filtre d'audit

3° ... et ajoutez /control/ au champ de saisie, variables "exclure" et "sous-répertoire".

C'est fini !

On pourrait sophistiquer la démarche, si vous utilisez les "jolies URL" Yacs par exemple, on pourrait exclure les inutiles /article-edit/ ou /section-edit/ ...

Vos retours d'expérience en la matière ?

Hello Bar for Japan on Wikipedyacs

<script type="text/javascript" src="//www.hellobar.com/hellobar.js"></script>
<script type="text/javascript">
new HelloBar(1,9126);
</script>
<noscript>Aidons les victimes du séisme japonais. Visitez http://goo.gl/wjZQz pour faire un don.
</noscript>

Cliquez 'play"...

Les structures de base d'un outil collaboratif permanent de construction de connaissances...
Bandeau "Page ébauche"

EbaucheCet article ou section est une ébauche et demande à être étoffé(e) (exemples, illustrations, liens connexes...).
Si vous vous en sentez capable, rejoignez-nous (enregistrement|connexion) et commencez à éditer ! Une aide est disponible pour les membres...

Content

• • "How to" : apposer des bandeaux significatifs

"How to" : apposer des bandeaux significatifs

Dans un outil collaboratif de type wiki, la sémantique de l'édition est aussi importante que celle de la consultation, car c'est à partir de l'édition ouverte et fluide d'une somme de connaissances que la consultation prend son essor.

Ainsi, un gestionnaire de contenu peut être amené à inciter des éditeurs divers en indiquant des priorités, des recommandations, ou des contraintes. Dans ce cas, l'apposition d'un beandeau clair est une technique adoptée de longue date par l'encyclopédie libre wikipedia par exemple, inspirez-vous de leurs exemples.

:! On y voit que le consensus adopté avec raison a été de codifié un contenu pré-existant : ainsi coller quelques signes comme {{Domaine public expiré}} dans une syntaxe wiki permet d'apposer un contenu plus vaste sous forme de bandeau.

La même chose est possible avec yacs :

• Rédigez un article avec un titre significatif
• Le champ introduction peut rester vide
• Rédigez dans le champ "description" le contenu tel que vous voudriez le voir apparaître en tant que bandeau, en usant subtilement des codes de mise en forme de yacs à votre guise.
• Enregistrez l'article (il n'est pas nécessaire de le publier)

Vous pouvez aussi préférer donner un surnom à la page article, le code le comprend : surnommez votre page tutoriel par exemple, et son contenu s'affichera dans une autre page comportant le code [article.description=tutoriel].

A vous, enfin, d'indiquer ces codes (qui deviendront codes de formatage pour vos éditeurs) dans une page de centralisation simple d'accès pour eux.

C'est cette dernière technique que nous allons favoriser ici.

• D'abord, préparez une image de dimension 72x72 px (ou 57x57) avec une résolution maximum de 132 ppi. Des coins arrondis de 20px en radius seront du plus bel effet
• Nommez le fichier image apple-touch-icon.png
• Ouvrez skins/votre_skin/template.php
• Vous devez finalement insérer dans la partie <head></head> l'appel vers cet icône :

  <link rel="apple-touch-icon" href="http://VOTRE_SITE.tld/apple-touch-icon.png" />
  

C'est tout ! Enregistrez et envoyez votre template.php sur votre serveur.

La bonne nouvelle, c'est que le favicon dédié s'affiche aussi sur iphone, et pour les curieux de passage ça marche aussi si vous n'utilisez pas yacs bien sûr !

Voilà un exemple : @jjuraver

Il suffit de rédiger le nom du compte préfixé d'un arob@se, une syntaxe courante chez Twitter.

Normalement vous devriez vois apparaître ceci en survolant @jjuraver :

Affichage hovercards sur wikipedyacs

Obtenir un clef d'API Twitter

Rendez vous dans la plateforme de développement autour de twitter, sur la page de l'application "Anywhere". Enregistrez-vous si ce n'est déjà fait puis suivez la procédure d'obtention d'une clef API.

Intégrer le code

Ouvrez le fichier template de votre site yacs : skins/mon_skin_template.php (ou n'importe quel dérivé)

Collez le javascript suivant, en remplaçant VOTRE_CLEF_API par... votre clef API. Cela se passe à peu près vers la ligne 45 :

// @Anywhere Twitter application
    echo "\t".'<script src="http://platform.twitter.com/anywhere.js?id=VOTRE_CLEF_API&v=1">
  </script>
  <script type="text/javascript">
     twttr.anywhere(function(twitter) {
              twitter.hovercards();
     });
  </script>
'."\n";

Enregistrez, videz le cache de yacs et testez l'application tout de suite en rédigeant une page contenant une syntaxe de type @profil_twitter_existant.

C'est tout !

Il faut donc expressement décider que Suivant / Précédent s'affichera au sein des articles, ce n'est pas automatique.

Vous pouvez observer ce code d'affichage en action dans cet article même !

C'est une bonne base de départ pour fabriquer des modèles d'édition d'article personnalisé, et aller plus loin ensuite, si besoin, grâce à edit_as_foo_bar.

Clairement, l'administrateur possède là tout un panel d'outils pour spécialiser les formulaire de création d'article, parmi lesquels :

• edit_as_simple
• edit_as_foo_bar
• Les pages modèles
• Les formulaires
• Les overlays

Dépliez les branches en cliquant sur les titres, et déplacez la carte à votre guise...

Browse this map with Freemind

Cette carte est basée sur les informations fournies par le document de référence de Bernard Paques.

Ensemble de fonctions disponibles pour la construction d'un template
Bandeau "Page ébauche"

EbaucheCet article ou section est une ébauche et demande à être étoffé(e) (exemples, illustrations, liens connexes...).
Si vous vous en sentez capable, rejoignez-nous (enregistrement|connexion) et commencez à éditer ! Une aide est disponible pour les membres...

Ces fonctions (liste non exhaustive) sont déclarées dans le fichier skins/page.php. Elles sont destinées à être appelées par le template.php de votre thème.

Page::body()

pour la déclaration du début du corps de document HTML (balise ) et initialisations diverses inhérantes à Yacs ;

Page::tabs()

pour la déclaration des onglets de la barre de navigation (menu en onglets des sections principales du site);

Page::bread_crumbs()

pour la déclaration de la fonction permettant d'afficher un arbre de liens de l'endroit où on se trouve (généralement placé en dessous de la barre de navigation ou directement au dessus du titre de la page courante);

Page::content()

pour la déclaration et l'affichage du contenu de la page courante et associées, ou contenu principal;

Page::side()

pour la déclaration et l'affichage du contenu de la colonne de gauche (Panneau de côté);

Page::extra_panel()

pour la déclaration et l'affichage du contenu de la colonne de droite (Panneau extra);

Page::footer()

pour la déclaration et l'affichage du contenu du pied de page.

Où sont installées ces images ?

• Les smileys sont dans le répertoire skins/_reference/smileys
  
• Les avatars sont dans le répertoire skins/_reference/avatars
• Les icônes de documents sont dans le répertoire skins/_reference/files

Comment peuvent-elles être employées ?

• Les rédacteurs utilisent les smileys en se référant à une page de centralisation : Smileys. Il suffit d'écrire le nom de l'image enntre 2 points pour l'afficher : :chinese:
  
• Les membres enregistrés peuvent se choisir un avatar existant, en se référant à la page de sélection /user-select_avatar/xxx où xxx est leur numéro d'identifiant usager. Pour accéder à cette page : s'identifier > visiter son propre profil > cliquer la commande "changer l'image"
• Lorsqu'un membre enregistre sa propre image, elle est alors stockées dans /images/user/xxx/mon_image.gif
• Les icônes de document sont automatiquement attachés au document en fonction de leur format. Il est toutefois possible de le personaliser pour un document en particulier (chapitre suivant)

Comment modifer ces librairies ou les étoffer ?

• /!\ Attention

  Pour ne pas écraser des fichiers existants qui porteraient le même nom, préférez nommer vos nouveaux avatars de manière itérative : si vous aviez 30 images installées, nommez les nouvelles 31, 32,... Quant aux smileys, nommez-les pertinemment, le nom de l'image sera le code à écrire pour le rédacteur final.
  Ajouter des smileys : envoyez vos images dans le répertoire d'installation
• Ajouter des avatars pré-installés : envoyez vos images dans le répertoire d'installation
• Changer l'icône d'un document particulier : cela se fait au cas par cas. Visualisez la page à laquelle est attaché le document, cliquez sur la petite commande "Détail". Dans cette page dédiée, vous avez un menu de commande avec "ajouter une image". Grâce à cette démarche, vous allez pouvoir envoyer une image particulière et la choisir comme icône de document...
  

Bandeau "Qualité !"

Cet article ou section a été élu "contenu de qualité" par une majorité de wikiyacsiens
Il n'y a donc pas de contre-indication à le diffuser ou l'exploiter comme bon vous semble...

Voir les autres contenus de qualité élus comme tel :

• Une homepage spéciale (1) - (popular)  , in Extras

Si certaines instructions ne sont pas spécifiquement renseignée, alors Yacs passe outre et fonctionne par défaut. Il suffit donc d'ajouter des instructions particulières pour personnaliser finement son site, et c'est bien le cas avec la homepage.

Par exemple, dans votre skin, vous avez plusieurs fichiers php, dont un fondamental : template.php

Il contient les informations de base pour construire les pages à l'écran, avec leurs blocs successifs. Par défaut, Yacs s'instruit de ce fichier pour construire toutes les pages, y compris l'accueil, mais il est capable d'en suivre un autre juste pour l'accueil si vous contruisez et enregistrez un fichier nommé template_home.php.

Dans ce cas, Yacs s'y soumettra automatiquement et lira les instructions de

• template_home.php pour votre acueil, puis
• template.php pour le reste du site.

Il ne vous reste plus qu'à éditer un tel fichier, et à construire les instructions qui vous conviennent pour l'affichage accueil. Vous aurez certainement besoin de vous aider des variables PHP listées ici.

Enfin, un fichier template de ce genre peut embarquer une feuille de style complémentaire pour peaufiner vraiment le style : ou autrement dit, vous avez tout loisir pour fabriquer un design totalement dédié à la page d'accueil qui peut s'avérer très différent du reste du site.

Autre applications

Vous pouvez appliquer la même personalisation à une rubrique en particulier, ou même un seul article !

Voir pour celà les variantes via le jargon : skin_foo_bar | variant_foo_bar | view_as_foo_bar

Plus généralement, référez-vous aussi au Jargon d'édition des sections

La configuration facilitée d'un tel design est réservé à un administrateur, appelé Associé dans le lexique Yacsien.

Les grandes zones configurables du thème flexible sont :

• Fond d'écran général, et fond de page (backgrounds)
  
• Haut de page (header)
• Onglets (tabs)
• Contenu du corps de page (body)
• Navigation (side boxes) : voir Navigation
  
• Extra (extra boxes) : voir Extra
  
• Pied de page (footer)

La fonctionnalité Thème flexible configurable permet de choisir des images de design pour chacun de ces blocs, pré-installées, où l'on peut également ajouter ses propres images.

Chaque zone -ou bloc- est configurable aussi pour la taille et la couleur des polices d'écriture de liens, du texte, des détails, des titres...

Comment utiliser ?

En tant qu'associé administrateur, rendez vous dans skins/ via le panneau de contrôle, puis au niveau du thème Flexible cliquez la commande Configurer ce thème.

Si vous vous amusez pendant des heures, c'est normal L'engin est très addictif car tellement facilitateur !

EbaucheCet article ou section est une ébauche et demande à être étoffé(e) (exemples, illustrations, liens connexes...).
Si vous vous en sentez capable, rejoignez-nous (enregistrement|connexion) et commencez à éditer ! Une aide est disponible pour les membres...

Content

• • "How to" : apposer des bandeaux significatifs
• Obtenir un clef d'API Twitter
• Intégrer le code
• Où sont installées ces images ?
• Comment peuvent-elles être employées ?
• Comment modifer ces librairies ou les étoffer ?
• Autre applications
  • Comment utiliser ?
  • Comment utiliser ?
• Méthode pré-installée
• Méthode dérivée
• Méthode de personalisation
  • A) Créer le menu
  • B) Commandez le template
  • C) Customisez la feuille de style
• Méthode pré-installée
• Méthode dérivée
• Méthode de personalisation
  • A) Créer le menu
  • B) Commandez le template
  • C) Customisez la feuille de style

Méthode pré-installée

Les plus pressés préfèreront donc choisir simplement l'un de ces skins pour obtenir leurs onglets. Mais ultérieurement vous pourriez piocher dans la méthode d'affichage des onglets natifs pour enrichir un skin qui n'en possède pas. Dans ce cas, lire ci-dessous...

Méthode dérivée

Rappel : ces fichiers se trouvent dans votre arborescence d'installation, à skins/mon_skin

• Ouvrez template.php
• Recherchez la ligne :

• //end of the header panel
  

• Juste au dessus de cette ligne, collez ces lignes :

• //horizontal tabs
  

• Page::tabs(FALSE);
  

• Enregistrez la modification du fichier.

Il faut à présent définir des règles d'affichage stylé :

• Ouvrez style.css (votre feuille de style, qui porte habituellement le nom de votre skin)
• Collez ces règles de style à l'endroit le plus pertinent pour vous :

• #tabs { /* the global navigation bar -- see template script */
      position: absolute;
      top: 134px; /* Hauteur par rapport au haut de page : A personaliser pour ajuster */
      left: 20px;
      margin: 0; /* need for IE Mac */
      padding: 0;
      width:950px; /* Largeur : à ajuster */
  }
  
  #tabs,
  #tabs a { /* text appearance in tabs */
      font-family: Georgia, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
      font-style: italic;
      height: 26px; /* Hauteur de la ligne : A personaliser pour ajuster */
  
  }
  
  #tabs ul { /* position tabs */
      width: auto;
      margin: 0;
      padding: 0;
      list-style: none;
      z-index: 90;
  }
  
  #tabs li {
      display:inline;
      margin:0 2px 0 0;
      padding:0;
      
  }
  
  #tabs li a { /* tab top left corner */
      margin:0 35px 0 0;
      padding:0 0 0 10px;
      text-decoration:none;
      float: left;
      background: transparent;
      text-align:center;
  
  }
  

Nous avons inséré quelques commentaires pour plus de lisibilité. Ajustez les options de positionnement et d'apparence selon votre design et votre goût, puis enregistrez le fichier modifié.

Rechargez une page de votre site en vidant tous les caches au besoin, et admirez

Méthode de personalisation

L'idée repose sur une intuition originale : vous allez créer simplement une liste de liens dynamique dans un article Yacs, et demander à votre skin de récupérer ce contenu pour l'afficher d'une manière particulière.

a) Créer le menu

Créez une page globale, et donnez-lui impérativement un surnom en plus du titre, par exemple "menuderoulant"

Etablissez la liste des sections racines, comme une liste à puce classique :

• menu 1
• menu 2
• menu 3
• menu 4

Puis dans chaque entrée de liste, appelez par code yacs la liste des sections à utiliser comme entrées. Cela va construire dynamiquement les listes à dérouler verticalement

• menu 1 [sections.compact=section:id1]
• menu 2 [sections.compact=section:id2]
• etc.

Exemple avec des sections de Wikipedyacs

• Speaking Yacs
• Yacs Design
  • L'entrepôt graphique
  • Extras
• Des nouvelles de WikipedYacs

Note : evidemment s'il n'y a pas de sous-section, le code n'affichera rien. Dans ce cas mettez directement la section racine en lien...

b) Commandez le template

Il faut appeler la description de cette page globale par le template pour positionner le menu :

// menu deroulant
if($article =  Articles::get('menuderoulant')) {              
  echo '<div  id=menuderoulant>'."\n";              
  echo  Codes::beautify($article['description']);              
  echo  '</div>'."\n";              
}

c) Customisez la feuille de style

Enfin vous devez appliquer à ce #div nommé #menuderoulant toutes les règles courantes de l'affichage déroulant horizontal ou vertical, et notamment ses options de liste.

Pour ce faire, vous pouvez vous baser sur les tutoriels en CSS, et pour les plus avancés essayez avec JQuery.

Nous publierons bientôt divers exemples dont vous pourrez vous inspirer, ou dupliquer tels quels