Utiliser le logiciel Typora

Utiliser le logiciel Typora pour faire une page html ou une page pdf.

Note : Logiciel utilisable avec Lecteur d'écran. Possibilité de faire : titres de niveau, liste à puces, insertion de lien, image, tableau, table des matières.

Préalable : obtenir Typora

Le logiciel est à l'adresse suivante : https://typora.io/releases/all . Choisir : Linux (64 bits) DEB et enregistrer dans le dossier Téléchargements.

Aller en suite dans le dossier Téléchargements,

faire un clic-droit sur : typora_1.12.4_amd64.deb et ouvrir avec l'installateur de paquets gdebi.

Le logiciel est utilisable aussi avec Windows et Mac, il est en français.

Les menus ont des raccourcis-clavier.

Préparer le texte

1 - si le texte existe sur Libre-office

C'est très simple.

• créer le document avec Libre-Office en respectant les critères d'accessibilité

• copier tout le texte.

• ouvrir Typora et coller le texte sur la partie droite de la fenêtre. Les styles sont respectés. On voit à gauche ce que ça donne en réalité (pré-visualisation obtenue en cliquant sur : Plan)

2 - si on part d'un texte brut

On lance Typora, on écrit le texte sur la partie droite de la fenêtre en mettant des titres de niveau. On utilise pour cela un ou plusieurs #

• un seul # pour un titre de niveau 1

• deux ## pour un titre de niveau 2

En passant une ligne, on obtient un nouveau paragraphe. On voit à gauche ce que ça donne en réalité (pré-visualisation obtenue en cliquant sur : Plan)

On fait des listes à puces non-ordonnées avec des tirets. Ou bien on sélectionne la partie concernée et on fait : Paragraphe/Liste à puces

On fait des listes à puces ordonnées avec des numéros. Ou bien on sélectionne la partie concernée et on fait : Paragraphe/Liste à puces non ordonnées.

Raccourcis intéressants

• italiques avec * . . . ou CTRL + i

• gras avec ** ... ou CTRL + B

Outils intéressants :

• Paragraphe/Table, pour insérer un tableau

• Format/Image pour insérer une image

• Paragraphe/Insérer pour faire un paragraphe après

• Paragraphe/Table des matières

• Paragraphe/Ligne horizontale

et bien sûr :

• Fichier/Exporter en PDF , les styles sont respectés.

• Fichier/Exporter en html .

Le document final

• Préparer le document avec Typora,

• Faire : Fichier / Exporter HTML qui conserve les styles,

• et enregistrer sous le nom souhaité : default.html par exemple.

Observations

On peut remarquer ceci :

• la balise <br />  permet d'aller à la ligne sans sauter une ligne. Utilisation rare.

• la balise <hr />  permet de tracer une ligne horizontale. Il vaut mieux utiliser : Paragraphe/Ligne horizontale

• on peut modifier les balises : au lieu de <h2> on peut mettre <h2 id="lien1"> ce qui permet de créer un lien qu'on utilise ensuite pour la table des matières.

• on peut aussi mettre : <h2 id=contenu">  et < h2 id="menu">  si nécessaire. Car id c'est l'identifiant, il doit être unique dans la page.

• Comment insérer une image : voir Format/image , où on peut mettre l'alternative textuelle.

• Comment insérer un lien : voir Format/Lien

• Tableau : voir Paragraphe/Table qui permet de choisir le nombre de lignes et de colonnes. On obtient par exemple ceci :

Une présentation personnalisée pour Typora

La présentation de base du document html obtenu avec Typora est correcte. Mais on peut souhaiter une présentation personnalisée comme ici. Nous l’avons fait, mais comment ?

• il faut utiliser un thème de base et le modifier selon ses désirs : couleurs, espacements, bandeau ...

• enregistrer ce document sous le nom : mon_style.css

• copier mon_style.css dans /home/user/.config/Typora/themes

• choisir ce style quand on crée le document définitif.

• il reste à ajuster un peu les choses par exemple : compléter <title></title>, vérifier le lien "aller au contenu"

• c’est facile, efficace, rapide.

Aller au contenu, aller au menu

La phrase est celle-ci :

<a href="#contenu"> Aller au contenu </a> - <a href="#menu"> Aller au menu </a>

et vérifier qu'on a, au bon endroit, id="contenu" et "id="menu"

Par exemple : <h1 id="contenu">

Cases à cocher, boutons radio

On peut enrichir un texte en ajoutant des cases à cocher qui permettent plusieurs réponses, ou des boutons radio qui permettent une seule réponse.

Voici le code pour les cases à cocher :

<form><fieldset>

<label><input type="checkbox" > Case 1</label><br /> <label><input type="checkbox" > Case 2</label><br />

</fieldset></form>

Voici le code pour les boutons-radio :

<form><fieldset>

<input type="radio" id="opt" name="choix" value="option"><label for="opt"> Bouton 1 </label><br />

<input type="radio" id="opt" name="choix" value="option"><label for="opt"> Bouton 2</label><br />

</fieldset></form>

Zone de saisie

Si on souhaite que la personne puisse écrire sa réponse, il faut mettre une zone de saisie, de cette façon :

<textarea placeholder="Saisissez votre texte ici..."></textarea>

mais ne pas oublier de mettre, dans la partie "style", les lignes ci-dessous qui commencent à textarea et finissent avec }

textarea

{ width: 100%; height: 150px; /* Environ 5 lignes selon la taille de police */

padding: 10px; box-sizing: border-box;

resize: vertical; /* Permet de redimensionner verticalement si besoin */

resize: horizontal; /* Permet de redimensionner horizontalement si besoin */

}