Bac à sable

Nettoyage avec style

Philippe — Thu, 01 Dec 2011 11:19:00 +0100

Après saisie ou collage dans l'éditeur visuel, suppression des attributs de style sur toutes les balises, sauf les images.

pwet:

pwet

Plugin ColorBox

Philippe — Thu, 13 Oct 2011 15:10:00 +0200

Fonctionnalités

Ce plugin permet de configurer l'aspect de la fenêtre modale dans laquelle sont agrandies les images de vos billets. Il est basé sur le script ColorBox pour jQuery de Jack Moore, sous licence MIT.

Plusieurs thèmes sont proposés, et peuvent être modifiés en CSS. De nombreuses options permettent de redimensionner les images, faire un diaporama, afficher du html, etc. L'aide intégrée du plugin détaille toutes ces options.

En images

Aspect de la fenêtre modale

Affichage d'une icône de zoom sur les miniatures

Paramètres avancés

Du contenu html

Dotclear Germany

Versions

A partir de la version 1.4, ColorBox n'est compatible qu'avec la version 2.2 de Dotclear. Toutes les versions sont sur Dotaddict, et la dernière en annexe de ce billet.

Plugin Boutons PayPal (tests)

Philippe — Thu, 13 Oct 2011 12:17:00 +0200

Pour le moment, le plugin ne fait rien côté public, et seule l'architecture de ses pages d'administration est en place. Une version de test est proposée aux plus aventureux en annexe, bien évidemment elle ne devrait être essayée que sur une installation locale.

Le plugin sera distribué... quand il sera prêt.

Boutons PayPal permet d'insérer dans les billets les boutons de paiement suivants :

Acheter
Faire un don
Souscrire
Offrir un chèque-cadeau
Ajouter au panier (PayPal ou autre)
Bouton enregistré dans votre compte PayPal

Les boutons peuvent être cryptés (SSL), et l'utilisation de l'API de PayPal est supportée par des URLs créées par le plugin et qui en assurent le traitement. Cela permet de gérer :

les notifications instantanées de paiement (IPN)
le transfert des données de paiement (PDT)

Configuration

Options avancées

Options des pages de paiement PayPal

Insertion d'un bouton

Plugin myGmaps

Philippe — Wed, 28 Sep 2011 19:49:00 +0200

Destiné à faciliter l'insertion de cartes Google Maps dans votre blog, le plugin myGmaps crée un nouveau type de billet : les éléments de carte. Ces éléments peuvent être des points d'intérêt, des parcours éditables ou d'autres objets Gmap.

Il est possible d'associer une carte Google Maps à un billet ou une page, et d'y inclure plusieurs éléments de carte, comme dans ce billet avec 1 fichier kml inclus et 2 points d'intérêt.

Les élément de carte

À retenir : un élément de carte est un type de billet particulier qui ne s'affiche pas sur le blog. Pour le voir, il doit être inclus dans une carte.

Types d'éléments

non défini : aucun marqueur n'est présent sur la carte. Cela peut servir par exemple à afficher une carte vide comme ici
point d'intérêt : un seul marqueur est présent sur la carte. Ce point sera affiché avec comme balise title le titre de l'élément de carte. Un clic sur le point affichera le contenu de l'élément dans l'infobulle
parcours : plusieurs marqueurs sont présents sur la carte, reliés par une ligne. Cette ligne sera affichée sur la carte. Un clic sur la ligne affichera le contenu de l'élément dans l'infobulle.
polygone : plusieurs marqueurs sont présents sur la carte. Reliés par une ligne ils délimitent un polygone. Ce polygone sera affiché sur la carte. Un clic sur l'objet affichera le contenu de l'élément dans l'infobulle.
fichier kml (ou kmz) inclus : un fichier kml est inclus dans la carte (il n'est toutefois pas modifiable).

Composition d'un élément

titre : il est obligatoire. Si l'élément est un point d'intérêt, le titre s'affichera au passage de la souris au-dessus de son icône
coordonnées : ce champ mémorise les coordonnées géographiques de l'élément et n'est modifiable qu'avec la carte affichée
description : ce champ, s'il est rempli, contiendra la description de l'élément. Celle-ci s'affiche dans une infobulle lors du clic sur un élément. La description peut être saisie en xhtml ou en syntaxe wiki comme un billet, et peut donc comporter tout type de contenu (images, liens, etc.). Attention toutefois à rester concis et ne pas inclure de trop grandes images, le contenu pouvant déborder de l'infobulle si celle-ci n'a pas la place de tout afficher...

Les cartes

Dans la page d'édition d'un billet, une nouvelle zone nommée Carte Google apparaît sous le champ Notes. Un clic sur le lien Ajouter une carte au billet permet d'insérer une carte dans le billet, en choisissant les éléments qui la composeront ainsi que son niveau de zoom, son centre et son type.

Une fois enregistrée, une carte peut être modifiée ou supprimée. La liste des éléments la composant est affichée et on peut toujours supprimer des éléments ou en ajouter.

Côté public, la carte s'affichera après le contenu du billet. Les différents éléments inclus seront affichés.

Téléchargement du plugin

Le plugin est déposée sur le Lab de Dotclear : myGmaps pour le développement.

Attention, il y a deux versions disponibles :

0.7.2 (trunk), la première version fonctionnelle stable
0.7.5 (branches), en cours de développement par Tomtom, beaucoup plus évoluée et devant à terme remplacer la précédente

Enfin, la version stable 0.7.6, correction de quelques bugs de la 0.7.2, est annexée au bas de la page.

Fermeture du blog

Philippe — Fri, 01 Apr 2011 19:23:00 +0200

Une image en dit parfois autant que tous les mots

Tests pre

Philippe — Thu, 06 Jan 2011 09:33:00 +0100

Tests d'alignement de texte

CSS

pre { font-family: "Courier New",monospace; font-size: 1em; width: 95%; overflow: hidden; white-space: pre; }

Code donné en #24 : ici

///html
<pre>AAAAAAAA&emsp;BBB
CCCCC&emsp;&emsp;&emsp;DDDDDDD
EE&#09;&#09;&#09;FFFFF
GGG&nbsp;&nbsp;HHHHH
</pre>
///

AAAAAAAA BBB
CCCCC   DDDDDDD
EE			FFFFF
GGG  HHHHH

Avec des  

///html
<pre>AAAAAAAA&nbsp;BBB
CCCCC&nbsp;&nbsp;&nbsp;&nbsp;DDDDDDD
EE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FFFFF
GGG&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HHHHH
</pre>
///

AAAAAAAA BBB
CCCCC    DDDDDDD
EE       FFFFF
GGG      HHHHH

Avec des espaces

///html
<pre>
AAAAAAAA BBB
CCCCC    DDDDDDD
EE       FFFFF
GGG      HHHHH
</pre>
///

AAAAAAAA BBB
CCCCC    DDDDDDD
EE       FFFFF
GGG      HHHHH

Test Syntaxe Highlighter with Python

Philippe — Sat, 18 Dec 2010 13:23:00 +0100

maListeDeMeubles = ['table','chaise','frigo']
maListeDeMeubles.sort()  #Tri de la liste
for unMeuble in maListeDeMeubles:
   print 'longueur de la chaîne ', unMeuble, '=', len(unMeuble)
 
#les listes imbriquées:
laListeDesNombresPairs = [ unNombre for unNombre in xrange(1000) if unNombre % 2 == 0]
 
#Les dictionnaires :
unAnnuaire = {'Laurent': 6389565, 'Paul': 6356785}
for unNom, x in unAnnuaire.items():
   print "le nom %s a pour numéro de téléphone %d" %(unNom, x)
 
 
#Les tuples (n-uplet) : séquence constante
Couleur = ('Rouge', 'Bleu', 'Vert')
print Couleur[0], Couleur[1],  Couleur[2]
 
PointDeReference = (100, 200)
print " x0 = %d   y0 = %d "  %(PointDeReference[0],PointDeReference[1])

Qu'est-ce que c'est que ce blog ?

Philippe — Wed, 21 Apr 2010 09:41:00 +0000

Ce site est un petit laboratoire de tests pour Dotclear et, justement, ce n'est pas un vrai blog :

on ne peut pas toujours y laisser des commentaires
le contenu des pages est souvent modifié et certaines quelquefois disparaissent sans préavis
les dates sont quant à elles totalement fantaisistes

Vous y trouverez des expérimentations diverses, pas toujours visibles car certains bricolages ont lieu sous le capot, et il arrivera fréquemment que les pages ne soient pas accessibles et remplacées par un vilain message d'erreur. Attention donc aux explosions de PHP, aux projections de CSS et aux taches de XHTML qui peuvent survenir à tout moment

A ceux qui seraient restés malgré ces avertissements, je souhaite tout de même une bonne visite. Vous trouverez une blouse et un masque près de la porte à droite pour poursuivre dans une relative sécurité.

Wiki tablorum

Philippe — Tue, 15 Sep 2009 17:17:00 +0200

abc	def	ghi
jkl	mno	pqr
stu	vwx	yz

Ce tableau a été rédigé en syntaxe WikiMedia avec le plugin Wiki Tables de Moe

Code :

///table
{| style="background:#0066cb; width:100%; color:white;" border="1" cellpadding="10" cellspacing="10"
|- 
| abc || def || ghi
|- style="background:#FFF; color:#1A2D52;"
| jkl || mno || pqr
|-
| stu || style="background:#F5D51E;color:#CF0602;" | vwx || yz
|}
///

Tests Vidéo

Philippe — Sat, 18 Jul 2009 08:50:00 +0200

Code

///html
<div class="external-media" style="margin: 1em auto; text-align: center;">
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/quO-sxqFYcE" width="425" height="350">
  <param name="movie" value="http://www.youtube.com/v/quO-sxqFYcE" />
  <param name="wmode" value="transparent" />
</object>
</div>
///

Youtube

DailyMotion

Carpe diem

Philippe — Wed, 11 Mar 2009 09:19:00 +0000

Ah ! Les modes...

Index Automagicum

Philippe — Tue, 03 Mar 2009 17:50:00 +0100

Le script jqplanize de NiKo permet de générer automatiquement une table des matières extraite de la hiérarchie des titres d’un document HTML. C'est très pratique pour faciliter la navigation dans un billet un peu long.

Il s'agit tout d'abord de télécharger ce plugin pour jQuery sur la page Google Code du projet : jqplanize, et de l'installer dans le répertoire js du thème utilisé (si ce répertoire n'existe pas il faut le créer à la racine du répertoire du thème).

Ensuite, ajouter dans le fichier _head.html du thème la ligne suivante :

<script type="text/javascript" src="{{tpl:BlogThemeURL}}/js/planize.js"></script>

Enfin, insérer dans le billet où l'on veut voir apparaître une table des matières le code suivant en syntaxe wiki :

///html
<script type="text/javascript">
$(document).ready(function(){
$('.post *').planize({ 
min_level: 3,
generate_toc:true,
toc_elem:$('#toc'),
toc_title: 'Table des matières',});
});
</script>
<div id="toc"></div>
///

Ce qui donne :

Titre1

Sous-titre1

Sed dapibus tempus diam. Suspendisse potenti. Nullam auctor tellus. Nullam ultrices tempor eros. Donec at ante. Aliquam erat volutpat. Cras vitae quam sed metus gravida mattis. In hac habitasse platea dictumst. Nullam diam odio, convallis non, faucibus eu, malesuada id, risus. Integer consequat pharetra ligula. Nulla eleifend libero nonummy elit. Morbi accumsan adipiscing mauris. In arcu est, ornare ac, nonummy a, cursus a, dolor. Duis aliquam ullamcorper risus. Aliquam risus.

Sous-titre2

Sous-titre3

Sous-sous-titre1

Plop. Duis aliquam ullamcorper risus. Aliquam risus.

Sous-sous-titre2

Suspendisse potenti. Nullam auctor tellus. Nullam ultrices tempor eros.

Titre2

Sous-titre1

Sous-titre2

Sous-titre3

Sous-sous-titre1

Sed dapibus tempus diam. Suspendisse potenti. Nullam auctor tellus. Nullam ultrices tempor eros. Donec at ante. Aliquam erat volutpat. Cras vitae quam sed metus gravida mattis.

Sous-sous-titre2

In hac habitasse platea dictumst. Nullam diam odio, convallis non, faucibus eu, malesuada id, risus. Integer consequat pharetra ligula. Nulla eleifend libero nonummy elit. Morbi accumsan adipiscing mauris.

Titre3

Sous-titre1

Sous-titre2

Sous-titre3

Sous-sous-titre1

Plop

Sous-sous-titre2

Pwet

Popup diabolicum

Philippe — Mon, 22 Sep 2008 19:19:00 +0200

Avant toute chose, n'oublions pas qu'il faut se méfier des pop-ups. Lire à ce sujet cet article d'Openweb

Il existe cependant des cas où une pop-up rend de nombreux services : afficher une légende, une aide, une photo, etc. Dans le cas présent, nous souhaitons insérer un lien vers un document PDF qui s'ouvrira dans une petite fenêtre superposée à la fenêtre courante.

C'est assez simple, mais il faut utiliser un brin de javascript. La syntaxe wiki de Dotclear ne le permettant pas, il va falloir écrire le code du lien directement en xhtml. Heureusement, Dotclear autorise l’insertion de xhtml dans une saisie en wiki, ce qui nous permet d'obtenir :

lien vers le document PDF

avec le code wiki suivant :

///html
<p><a href="/public/Acid2.pdf" onclick="window.open(this.href, 'PDF', 'height=600, width=800, top=100, left=100, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=no, status=no'); return false;">lien vers le document PDF</a></p>
///

Wiki in situ

Philippe — Sun, 04 Nov 2007 09:59:00 +0000

Vestibulum ultrices "purus" : id 'odio'. <Duis> nec <<erat>> ornare dolor pellentesque gravida. Pellentesque turpis. Cras non mauris. Donec pede leo, eleifend non, imperdiet non, interdum ut, diam. Vestibulum porta. Nulla interdum wisi non neque. Ut sollicitudin blandit sem. Etiam risus diam, elementum id, vehicula eget, consectetuer ac, quam. Cras sapien.

Vestibulum ultrices purus id odio. Duis nec erat ornare dolor pellentesque gravida. Pellentesque turpis. Cras non mauris. Donec pede leo, eleifend non, imperdiet non, interdum ut, diam. Vestibulum porta. Nulla interdum wisi non neque. Ut sollicitudin blandit sem. Etiam risus diam, elementum id, vehicula eget, consectetuer ac, quam. Cras sapien.

Titre de niveau h3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed scelerisque euismod leo. Donec magna (balise <strong>). Integer mollis nonummy magna. Donec tristique lorem a pede. Nunc scelerisque sodales justo. Phasellus tempus eros. Praesent feugiat, mauris at malesuada blandit, justo nisl dignissim tortor, a ornare sem nulla in ante. Integer elit orci, tempor eu, rhoncus ut, tristique eu, tellus. Sed eget lorem. (<em>) Sed sodales, purus et luctus adipiscing, orci nulla scelerisque orci, at lobortis ante sapien vitae felis. Aenean varius tempor ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras malesuada commodo leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Etiam mollis, nunc vitae dignissim cursus, velit odio sollicitudin mi, ut sollicitudin turpis elit eu elit. (<q>)

Titre de niveau h4

Morbi sed erat. Maecenas rutrum nunc a erat. Nam libero nunc, mattis eget, pellentesque nec, molestie in, wisi. Phasellus rutrum neque nec eros. Donec lectus lacus, lacinia in, lacinia non, semper eget, lectus. In hac habitasse platea dictumst. (<blockquote>)

In velit. Suspendisse potenti. In accumsan, odio id commodo consectetuer, libero nulla feugiat nisl, eget tincidunt metus quam non justo. Praesent tellus. Integer aliquam. Duis pulvinar lectus ac nibh auctor pharetra. In eleifend. Donec rhoncus erat quis mi. Aenean leo ante, adipiscing venenatis, mattis ut, volutpat nec, sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Titre de niveau h5

Curabitur aliquet arcu non nulla. Phasellus dictum enim sed odi :

Integer molestie faucibus felis. Nam volutpat commodo dolor. Cras viverra. Cras euismod odio et massa commodo vehicula. Etiam eget tellus. Etiam tempus sapien sit amet nulla. Sed euismod, metus eu condimentum ornare, nunc dui malesuada wisi, et tempor nisl ante vel nisl. Praesent sit amet libero ut wisi tincidunt eleifend. (<pre>)

Aenean mauris. Ut egestas cursus massa. Fusce venenatis tellus nec augue dapibus aliquam. Ut ac lorem.

Morbi eget purus. Integer tempor consectetuer risus :

Nulla viverra lorem a metus. Aliquam aliquet wisi nec orci.
Nullam sodales, lacus sed semper hendrerit, orci elit scelerisque enim, quis egestas urna felis eget risus.
- Cras wisi sapien
- dictum id,
- fringilla ut,
- gravida sed, mi
Nulla viverra lorem a metus. Aliquam aliquet wisi nec orci.
Nullam sodales, lacus sed semper hendrerit, orci elit scelerisque enim, quis egestas urna felis eget risus.
Vivamus mollis. (<ul><li>)

Vivamus risus. Maecenas eros arcu, dictum ut, euismod et, dictum id, tellus. Etiam nonummy vestibulum mi. Donec leo dui, congue et, rhoncus eu, accumsan eu, arcu. Morbi id enim vel elit varius cursus.

Nulla viverra lorem a metus. Aliquam aliquet wisi nec orci.
Nullam sodales, lacus sed semper hendrerit, orci elit scelerisque enim, quis egestas urna felis eget risus.
1. Cras wisi sapien
2. dictum id,
3. fringilla ut,
4. gravida sed, mi
Nulla viverra lorem a metus. Aliquam aliquet wisi nec orci.
Nullam sodales, lacus sed semper hendrerit, orci elit scelerisque enim, quis egestas urna felis eget risus.
Vivamus mollis. (<ol><li>)

Pellentesque condimentum nisl vitae sapien. Phasellus convallis leo id tortor. In eu felis in neque placerat auctor. Phasellus in mi at wisi congue ultrices. Etiam viverra. In vel sem sed augue dignissim aliquet. Integer nisl quam, vestibulum nec, consectetuer eu, sodales at, ligula. ~~Pellentesque habitant morbi tristique senectus~~^[1] et netus et malesuada fames ac turpis.

Notes

[1] Une petite note expliquant la suppression et qui permet de tester aussi cette mise en forme particulière.

Bac à sable

Nettoyage avec style

Plugin ColorBox

Fonctionnalités

En images

Aspect de la fenêtre modale

Affichage d'une icône de zoom sur les miniatures

Paramètres avancés

Du contenu html

Versions

Plugin Boutons PayPal (tests)

Configuration

Options avancées

Options des pages de paiement PayPal

Insertion d'un bouton

Plugin myGmaps

Les élément de carte

Types d'éléments

Composition d'un élément

Les cartes

Téléchargement du plugin

Fermeture du blog

Tests pre

CSS

Code donné en #24 : ici

Avec des &nbsp;

Avec des espaces

Test Syntaxe Highlighter with Python

Qu'est-ce que c'est que ce blog ?

Wiki tablorum

Tests Vidéo

Code

Youtube

DailyMotion

Carpe diem

Index Automagicum

Titre1

Sous-titre1

Sous-titre2

Sous-titre3

Sous-sous-titre1

Sous-sous-titre2

Titre2

Sous-titre1

Sous-titre2

Sous-titre3

Sous-sous-titre1

Sous-sous-titre2

Titre3

Sous-titre1

Sous-titre2

Sous-titre3

Sous-sous-titre1

Sous-sous-titre2

Popup diabolicum

Wiki in situ

Titre de niveau h3

Titre de niveau h4

Titre de niveau h5

Notes

Avec des