ustensile → documentation.md

Tags: Documentation

Ethertoff

L'utilisation optimale d'Ethertoff se fait par le formatage Markdown qui est très simple d'utilisation. Pour cela, veuillez nommer votre pad avec l'extension ".md". Trouvez plus bas comment utiliser Markdown.

Plus de renseignements sur l'outil: http://osp.kitchen/tools/ethertoff.

CREATE: Créez un nouveau pad
LIST: Accédez à la liste entière des pads
RE-INDEX: Générez les listings automatiques
SCREEN.CSS: CSS pour l'écran. Possibilité d'écrire en langage Less.
LASER.CSS: CSS pour une impression à domicile. Possibilité d'écrire en langage Less.
OFFSET.CSS: pour une impression chez un imprimeur. Possibilité d'écrire en langage Less.
DOCUMENTATION: Le pad de la documentation que vous consultez en ce moment
READ: Mode lecture
SLIDE: Mode slideshow (accessible depuis le mode READ).
Pour créer une nouvelle slide, créez un nouveau titre avec un #.
WRITE: Mode écriture
PRINT: Pour les visiteurs, lance la commande d'impression et appelle le CSS "laser.css". Pour les membres du site logués, affiche le mode impression offset (ne marche que sur des navigateurs Webkit comme Safari, Epiphany…).

Méta-données

Elles s'affichent dans la barre droite de l'écran lorsqu'on est logué. Vous pouvez créer vos propres méta-données à la volée en écrivant en début de pad ceci:

Méta-donnée 1: valeur
Méta-donnée 2: valeur 1
    valeur 2
    valeur 3

Attention à ne pas mettre d'espace avant ":" et bien laisser 4 espaces en début de ligne en cas de valeurs multiples.

Certaines méta-données sont utilisées publiquement. Voici comment les utiliser:

Authors: Nom1, Prénom1
    Nom2, Prénom2
Date: MM/JJ/AAAA
Tags: tag 1,
    tag 2

Cette méta-donnée permet de rendre le pad public, c'est-à-dire accessible lorsqu'on n'est pas logué: Status: Public

N'oubliez pas de ré-indexer le site pour mettre à jour les listings automatiques.

Markdown

http://daringfireball.net/projects/markdown/dingus (voir lexique à droite) http://michelf.ca/projects/php-markdown/dingus/ (utiliser le filtre PHP mardown extra) Attributs (classes et ids etc.): cf http://pythonhosted.org/Markdown/extensions/attr_list.html

Markdown basiques

italic
bold

Header 1 #

Header 2 ##

…

Header 6

Paragraphes

Pour obtenir un alinéa : faire un saut de ligne dans le pad Pour obtenir un saut de paragraphe (sans alinéa) : faire deux sauts de ligne dans le pad + ***

premier paragraphe

deuxième paragraphe avec retrait

troisième paragraphe saut de ligne

Notes de bas de page Markdown

Appel de note dans le texte : [^motclé] Note de bas de page ( à insérer en bas du texte) : [^motclé]: blabla

Mettre un mot clé plutôt qu'un numéro permet de rattacher une note au texte de manière sémantique, ce qui évite de devoir refaire la numérotation s'il y a un changement. Exemples: [^Ruquier] pour une note donnant la source biblio d'une citation de Laurent Ruquier [^Ruquier2] s'il y en a plusieurs, ou plus précis: [^Sun Ra, «My Music Is Words»] * [^bouillabaisse] pour une note sur un mot ou expression

Harmoniser les appels de notes : l'appel de note est placé à l'intérieur de la ponctuation (1). «En revanche, il est placé à l'extérieur d'une citation.» (1)

Liens vers d'autres sites

Principe: le texte cliquable entre crochets suivi du lien entre parenthèses textes cliquable

pour les textes dont il existe une occurence papier et une version en ligne Écrire les références papier de façon à ce que ces références comportent le lien Exemple dans le texte Un étrange amour: ? Brian Eno, cité par Michael Bracewell, in Michael Bracewell, «Close to Home», Mousse, N°29, septembre 2011
pour les textes uniquement accessibles en ligne faire en sorte de rendre visible au lecteur l'adresse du site et faire en sorte qu'il soit cliquble Exemple dans le texte Un étrange amour: ? Voir: http://www.chartsinfrance.net/Depeche-Mode/news-73312.html
pour renvoyer vers des sites de façon générale (le site pas une page en particulier) écrire entre crochets l'adresse simplifiée (sans http://) et l'adresse complète dans les parenthèses Exemple dans le texte Un étrange amour: ? Voir le fantastique blog Clonehenge

Liens sur le titre d'un texte / pad

Le markdown produit un code comme ça: <o>future<o>

Pour des raisons techniques exotiques, le site pour l’instant aime pas des titres avec du ” En utilisant directement le html, et en remplaçant le ” avec un ’, ça marche: <o>future<o>

Commentaires

(non visible en mode lecture, ou avec super plug in d'Alex)

Caractères spéciaux

De manière générale: http://copypastecharacter.com/ (permet de copier/coller un caractère spécial)

Exposants ^e

Espace insécable (à insérer avant un chiffre, après un siècle, etc., (toutes les expressions en 2 mots ne pouvant être coupées)): Par exemple : XX^e siècle Pour une pagination : p. 222

Numéro: ? et non n° ou N°

Nom de la revue: ???

remplacer les ... par le caractère … (alt + point)

Listes

Ordered, without paragraphs: 1. Foo 2. Bar

Unordered, with paragraphs: A list item. With multiple paragraphs. Bar

You can nest them: Abacus * answer Bubbles 1. bunk 2. bupkis * BELITTLER 3. burper * Cunning

Blockquotes (citations)

Email-style angle brackets are used for blockquotes.

And, they can be nested.

Headers in blockquotes

You can quote a list.

Etc.

<blockquote>
    <p>You know the golden rule, don’t you boy? Those who have the gold make the rules.</p>
    <footer>Crazy hunch-backed old guy from the movie Aladdin</footer>
</blockquote>

> You know the golden rule, don’t you boy? Those who have the gold make the rules.
> 
> <footer>Crazy hunch-backed old guy from the movie <em>Aladdin</em></footer>

Règles typographiques françaises

Pas d'espaces avant et après: — + × =

Pas d'espaces avant: » › : ; ? !

Pas d'espace après: « ‹

— dans une citation : «Point à l'intérieur si la phrase est entière.» Par contre, «le point est placé à l'extérieur des guillemets si la citation ne commence pas par une majuscule». — capitales accentuées — différencier le signe seconde ' et apostrophe ’ — XX^e (chiffres romans en capitale, pas en petites capitales, e en exposant) — titres d'œuvres : se référer au guide pour les précisions (nombreuses), mais de manière générale, pour un titre de livre qui commen ce par un article défini : Le Fou et non Le fou (sauf pour les titres d'articles) — Œuvre, œuvre et non OEuvre ou oeuvre — attention aux doubles espaces — harmoniser [...] et non (...) — harmoniser les tirets pour l’ensemble des textes. Nous utilisons les grands tirets — — Ibid. / op. cit. / art. cit. en italique avec espaces insécables — les titres anglais : Des Capitales aux Mots Importants — chiffres en toutes lettres dans les textes (sauf pour les numéros d'ordre comme page 105, ou années 1960 et non années 60) — Blockquote : pas de guillemets et si il y en avait il ne faut pas juste les enlever mais faire attention à transformer les potentiels guillemets simples en guillemets doubles et mettre l'appel de note après le point.

Règles typographiques américaines

Pas d'espaces avant et après: — + × =

Pas d'espaces avant: ” ’ : ; ? !

Pas d'espace après: “ ‘

Dans les textes anglais la ponctuation est “à l'intérieur des guillemets.” Même lorsque la citation est au “milieu d'une phrase,” ou n'est pas une “phrase entière.” http://www.chicagomanualofstyle.org/16/ch06/ch06_tab01.html

Growing up, we always preferred to “bear those ills we have.” “Thus conscience does make cowards of us all,” she replied.

Colons and semicolons—unlike periods and commas—follow closing quotation marks; question marks and exclamation points follow closing quotation marks unless they belong within the quoted matter.

Take, for example, the first line of “To a Skylark”: “Hail to thee, blithe spirit!” I was invited to recite the lyrics to “Sympathy for the Devil”; instead I read from the Op-Ed page of the New York Times. Which of Shakespeare’s characters said, “All the world’s a stage”? but “Timber!” “What’s the rush?” she wondered.

Notes de bas de pages

Appels de notes,[^1] toujours à l'extérieur de la ponctuation.[^2]

En résumé : — pour un livre: Auteur, Titre (Lieu: Éditeur, Année), Pages

— pour une revue: Auteur, “Titre,” Revue, ? (Date): Pages

Exemples: http://www.chicagomanualofstyle.org/16/ch14/ch14_sec018.html

BOOK WITH SINGLE AUTHOR OR EDITOR

Première apparition: Michael Pollan, The Omnivore’s Dilemma: A Natural History of Four Meals (New York: Penguin, 2006), 99–100.

En version condensée (à la place de op. cit.): Pollan, Omnivore’s Dilemma, 3.

Joel Greenberg, ed., Of Prairie, Woods, and Water: Two Centuries of Chicago Nature Writing (Chicago: University of Chicago Press, 2008), 42. Greenberg, Prairie, Woods, and Water, 326–27.

BOOK WITH MULTIPLE AUTHORS

Geoffrey C. Ward and Ken Burns, The War: An Intimate History, 1941–1945 (New York: Knopf, 2007), 52.

Joyce Heatherton, James Fitzgilroy, and Jackson Hsu, Meteors and Mudslides: A Trip through . . .

BOOK WITH AUTHOR PLUS EDITOR OR TRANSLATOR

Gabriel García Márquez, Love in the Time of Cholera, trans. Edith Grossman (London: Cape, 1988), 242–55. García Márquez, Cholera, 33.

CHAPTER IN AN EDITED BOOK

Glenn Gould, “Streisand as Schwarzkopf,” in The Glenn Gould Reader, ed. Tim Page (New York: Vintage, 1984), 310. Gould, “Streisand as Schwarzkopf,” 309.

JOURNAL ARTICLE

Walter Blair, “Americanized Comic Braggarts,” Critical Inquiry 4, ?2 (1977): 331–32. Blair, “Americanized Comic Braggarts,” 335.

Médias

Images

Insertion dans le texte

Image

![description de l'image](image.jpeg)

Image cliquable (lien vers l'image)

[description de l'image](image.jpeg)

Image avec légende

<figure>
    <img src="/media/images/01_camille-pageard-it-s-love-money/Bat-Camille_Pageard-It_s_love_money-FR-Image_01.jpeg" alt="" />
    <figcaption><em>The Last Whole Earth Catalog</em>, juin 1971, p.325.</figcaption>
</figure>

<figure>
    <img src="/media/images/01_camille-pageard-it-s-love-money/Bat-Camille_Pageard-It_s_love_money-FR-Image_01.jpeg" alt="" />
    <figcaption><em>The Last Whole Earth Catalog</em>, juin 1971, p.325.</figcaption>
</figure>

*The Last Whole Earth Catalog*, juin 1971, p.325.

Upload sur le site

Pour uploader des images sur le nouveau site il faut un logiciel tel Cyberduck : http://cyberduck.io

Il faut se connecter en SFTP au serveur et rentrer ces codes : Server: Nom d’utilisateur: Mot de passe **

Images pour impression (par Bat)

Ajouter dossier HD dans dossier Images pour un texte, avec les mêmes images (même nom) mais en 300dpi, CMYK ou Greyscale selon impression.

Vidéo et son

Les codes ‘embed’ de Youtube/Vimeo/Soundcloud peuvent être utilisés tels quels. C’est aussi possible de utiliser des sons téléchargés vers le serveur de BAT Les images doivent être en format .mp4 encodé H264, les sons en format .mp3. La syntaxe est la suivante:

<video src="/media/video/trailer.mp4" />
<audio src="/media/audio/mollie_01.mp3" />

CSS

http://www.quackit.com/css/tutorial/css_text.cfm

<head> début balise
</head> fin balise

<div> = bloc (feuille de style de paragraphe)
<span> = ligne (feuille de style de caractère) > [[01-camille-pageard-its-love-money.md]] Windsor

<ul> = liste non numérotée
<ol> = liste  numérotée

Dans le HTML: - class : récurrent dans la page - id : peut exister qu'une seule fois dans le doc, pour adresser qqchose de précis (ex: id content)

Dans le CSS: - class: accéder avec un . (ex: .button) - id: accéder avec un # (ex: #content)

blockquote (sans point ni diese) : change toutes les occurences partout

nav : navigation, le sommaire sur la droite li = list

Combiner (Cascading Style Sheets)

appliquer des styles à chacun des éléments avec des virgules = h1, h2, h3, h4
si espace entre 2 éléments : le second à l'intérieur du premier = possible de combiner les class avec un espace (imbrique les éléments)
si pas d'espace entre 2 éléments : concerne les 2 éléments au même niveau
- : le suit directement (ex: p + p : permet de styler deux éléments qui se suivent, mais uniquement le deuxième)
ça style toujours le dernier élément (sauf la virgule qui est une suite d'élément)
: permet de préciser et d'aller loin dans les éléments

Couleurs Web

http://babylon-design.com/216-couleurs-web/

↑