HTML (incontournable)

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

l’HTML sans HTML

• Éditeurs WYSIWYG
  • TinyMCE¹
  • CKEditor²
• Langage de balisage léger
  • BBcode
  • Textile
  • Markdown
  • MediaWiki (Wikipédia)
  • Dotclear
  • Spip

• SGML
• HTML
• XML
• Latex

• 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).

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

• 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.

• 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.

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

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

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%

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

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

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

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 !

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.

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??

• 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.

• 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.

• 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 ?

Version Php de Textile 2.2

https://github.com/netcarver/textile

Tester Textile 2.2

http://textile.sitemonks.com

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