½ {$title}
{$author}
of {$slidecount}

Textile, a human Web text Generator

Textile,
a human
Web text
Generator

Sommaire

Écrire pour sur le Web

HTML (incontournable)

  • Syntaxe trop lourde pour se plonger dans l’écriture
  • Syntaxe visuellement pénalisante, re/lecture difficile.

l’HTML sans HTML

  • Éditeurs WYSIWYG
    • TinyMCE1
    • CKEditor2
  • Langage de balisage léger
    • BBcode
    • Textile
    • Markdown
    • MediaWiki (Wikipédia)
    • Dotclear
    • Spip

Langage de balisage (Markup Langage)

  • SGML
  • HTML
  • XML
  • Latex

Langage de balisage léger

  • Une syntaxe simple à apprendre (souvent de simples caractères typo) ;
  • un simple éditeur de texte ou un textarea suffit ;
  • lisible dans sa forme non formatée ;
  • Le serveur converti le texte en langage de balisage (parsing).

Histoire de Textile

  • Origine : Langage PHP (Regex), syntaxe converti en XHTML ;
  • Créé par Dean Allen ;
  • v 2.0 en 2004, inclus dans Textpattern1 (CMS créé également par Dean Allen) ;
  • Version Php est toujours maintenu par le communauté Textpattern1.
  • Dernière version : 2.2 sorti en Septembre 2010.

1 http://textpattern.com/

Possibilités de Textile

  • Macros : © ™ ® ‘single’ “double” … — 5×5 ;
  • Paragraphes, retour à la ligne, class="caps" auto ;
  • strong | emphase | delete | add | sup | sub ;
  • citation courtes | codes | acronymes ;
  • liens, alias de liens, avec attribut title ;
  • images, flottant à droite, à gauche, avec attribut title ;
  • titres niveau 1 à niveau 6 ;
  • bloc de citation, bloc de code ;
  • listes non ordonnées | ordonnées | de définition à plusieurs niveaux ;
  • tableaux ;
  • alignements droite, gauche, centré, justifié ;
  • indentations droite et gauche ;
  • Notes de bas de pages ;
  • ajouter span ;
  • Ajouter attributs class, id, style et lang ;
  • commentaires ###. Non visible en sortie ;
  • Possibilité de combiner/compléter avec du code html.

Avant de commencer

  • Un texte est considéré comme paragraphe par défaut ;
  • un retour à la ligne -> break line ;
  • une ou plusieurs ligne(s) vierge(s) = nouveau bloc (nouveau § par défaut) ;
  • balises de blocs se placent en début de ligne ;
  • balise de bloc se termine par un point + espace avant de démarrer le contenu.

Blocs

Paragraphe
p. Mon paragraphe de texte
Titres
h1. Titre niveau 1
h6. Titre niveau 6
Bloc de citation
bq. Ma citation
Bloc de code
bc. code informatique

Listes

Ordonnée
* item 1
* item 2
Non ordonnées
# item 1
# item 2
Listes imbriqués
# item 1
** item 1.1
** item 1.2
### item 1.2.1
### item 1.2.2
# item 2
# item 3
Définition / Description
: terme
; Définition

Inline

Emphase
_mots en emphase_
Strong
*Mots en emphase forte*
Delete
-Mots supprimés-
Add
+Mots ajoutés+
Citation courte
??Un BarCamp est une rencontre, une non-conférence ouverte??
Code
@code informatique@
Acronyme
WYSIWYG(What You See Is What You Get)
balise span
%contenu encadré par une span%

Liens

Lien
"Intitulé du lien":adresse_du_lien
"Barcamp Gorée":http://www.barcampgoree.org/
Lien avec titre
"Barcamp Gorée(visiter le site)":http://www.barcampgoree.org/
adresse lien
"$":http://www.barcampgoree.org/
Alias de lien
définition de l’alias : [barcampG]http://www.barcampgoree.org/
utilisation : J'ai participé au "Barcamp":barcampG

Images

image
!URI de l'image!
!http://barcampgoree.org/wp-content/uploads/logo_barcamp_gor%C3%A9eV4.png!
Avec title et alt
!http://barcampgoree.org/.../logo_barcamp_gor%C3%A9eV4.png(Logo du Barcamp)!
Image flottante à gauche
!<http://barcampgoree.org/wp-content/uploads/logo_barcamp_gor%C3%A9eV4.png!
Image flottante à droite
!>http://barcampgoree.org/wp-content/uploads/logo_barcamp_gor%C3%A9eV4.png!

Alignements et indentations

Alignements

Aligné à gauche
p<. Paragraphe ferré à gauche
Aligné à droite
p>. Paragraphe ferré à droite
Centré
p=. Paragraphe centré
Justifié
p<>. Paragraphe justifié

Indentations

Indenter à gauche padding-left: Xem
p(. Paragraphe indenté à gauche
Indenter à droite padding-right: Xem
p). Paragraphe indenté à droite

Tableaux

Exemple tableau réalisable avec Textile 2

  • Cellule-titre <th> d’une largeur de 3 cellules colspan ;
  • Cellules titres alignés à gauche
  • scores alignés à droite
|                    |_\3=.    Scores des 3 équipes  |
|                    |_. Rouges |_. Bleus |_. Jaunes |
|_<. 1[^ère^] manche |>.  2     |>. 10    |>.      8 |
|_<. 2[^e^] manche   |>. 5      |>.   4   |>.     7  |
|_<. 3[^e^] manche   |>. 6      |>.   3   |>.   12   |
Scores des 3 équipes
Rouges Bleus Jaunes
1ère manche 2 10 8
2e manche 5 4 7
3e manche 6 3 12

Nouveautés de la version 2.2

  • Légende <cation>.
  • Description <summary>.
  • Découper le tableau en Entête <thead>, Pied <tfoot> et Corps <tbody>.
  • Définir les colonnes du tableaux colgroup et col

Notes de bas de pages

Principe

Lorem ipsum dolor sit amet, 
consectetur[1] adipisicing elit, 
sed do eiusmod tempor incididunt 
ut labore et dolore magna alqu[1].

 fn1. La note que l'on place où l'on veut, 
 pas forcement en bas de page !

 

Lorem ipsum dolor sit amet, consectetur1 adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna alqu1.

1 La note que l’on place où l’on veut, pas forcement en bas de page !

Possibilités de Textile v2.2

  • Notes avec revoie (lien) vers le numero de note fn1^. …
  • Notes avec revoie multiple ;
  • Numérotation automatique des notes.

Attributs HTML

class
h1(titre). add class titre à mon titre
p. %(lettrine)U%n paragraphe avec une lettrine
Il vous faut _(ingredient)3 carottes_ et _(ingredient)2 oignons_
ID
p(#chapeau). Texte d'introduction d'un article
ID et class
p(maclass#monID) . Add class + ID
Styles CSS
p{color:blue;margin:30px}. Paragraphe bleu
lang
??[en]Textile, a human Web text Generator??

Inconvénients

  • Courbe d’apprentissage (obstacle énorme) ;
  • L’habitude du WYSIWYG ;
  • Nécessite un memo pour utilisateurs épisodiques ;
  • Manque de “user friendly”, aspect geek ;
  • L’intégrateur doit prévoir une mise en forme complète.

Avantages

  • Code propre en sortie ;
  • esprit du web (séparation du fond et de la forme) ;
  • réflexion sur la sémantique, le redacteur se concentre sur le fond, pas la forme ;
  • écriture rapide ;
  • garder une cohérence graphique, l’auteur ne s’occupe pas de la mise en forme ;
  • légèreté de l’interface de saisie (un simple textarea) ;
    • comparaison TinyMCE (> 5Mo / 200 Ko de Js).
  • écrire des billets formatés à l’avance avec un simple éditeur de texte brut (.txt).
  • envoyer ses écrits avec le protocole XML/RPC ;
  • full Cross-browser.

Implémentation de Textile1

  • Il existe des plug’in de la version PHP pour les principaux CMS PHP.
  • Text::Textile, implementation en Perl ;
  • PyTextile, implementation en Python ;
  • RedCloth, implementation en Ruby ;
  • vbsTextile, implementation pour Microsoft Active Server Pages ;
  • Textile UDF, implementation en ColdFusion ;
  • JTextile | Textile4j, an implementations en Java ;
  • “Textile JS”, Textile en Javascript

La plupart sont des implémentations de la version 2 de Textile.

1 seul site pour les rassembler tous ?

1 source: en.wikipédia

Trouver / Essayer Textile 2.2 (Php)

Version Php de Textile 2.2
https://github.com/netcarver/textile
Tester Textile 2.2
http://textile.sitemonks.com

Merci

  • Dean Allen, pour Textile et Textpattern
  • Steve alias Net-carver pour version 2.2
  • Eric Meyer pour slideshow javascript S5
  • Senticad