Il s'agit de l'aéroglisseur de commande qui peut être exécuté dans le fournisseur d'hébergement gratuit OnWorks à l'aide de l'un de nos multiples postes de travail en ligne gratuits tels que Ubuntu Online, Fedora Online, l'émulateur en ligne Windows ou l'émulateur en ligne MAC OS
PROGRAMME:
Nom
aéroglisseur - Aéroglisseur! Documentation
Contenu:
INTRODUCTION
GUI les outils are limiter
J'avais l'habitude de faire des présentations avec un logiciel de diaporama typique, tel que OpenOffice/LibreOffice
Impressionnez, mais ces outils semblaient limités et limitatifs. Je dois faire beaucoup de réorganisation
et se déplacer, et cela pourrait signifier changer les choses des listes à puces aux en-têtes pour
texte aux images et retour aux listes à puces encore une fois. Cela se passe à travers l'ensemble
traiter. Je pourrais réaliser que quelque chose qui n'était qu'une puce doit être une diapositive, ou
qu'un ensemble de diapositives pour des raisons de temps doit être réduit à des puces. Beaucoup de
la réorganisation vient de voir ce qui tient sur une diapositive et ce qui ne le fait pas, et comment je
besoin de rythmer la présentation, et dans une certaine mesure même quel genre d'images je peux trouver
pour illustrer ce que j'essaye de dire, et si les images sont drôles ou pas.
Présentation software devrait vous donner you complet liberté à réorganiser votre présentation on
chaque niveau, pas uniquement by réorganiser diapositives.
La solution pour moi et pour beaucoup d'autres, est d'utiliser un langage de balisage de texte, comme
reStructuredText, Markdown ou similaire, puis utilisez un outil qui génère une diapositive HTML
montrer de cela.
Balisage de texte donne you le commodité et liberté à rapidement Bougez les pièces autour as you
le souhaitez.
j'ai choisi Texterestructuré, parce que je le connais et parce qu'il a un ensemble de fonctionnalités énorme. Lorsque
J'ai lu les documentations d'autres langages de balisage de texte, il n'était pas évident qu'ils aient le
fonctionnalités dont j'avais besoin ou non.
Casserole, tourner et zoom
Les outils qui existent pour faire des présentations à partir du balisage de texte feront des diaporamas qui ont
une séquence de diapositives de gauche à droite. Mais la mode maintenant est d'avoir des présentations qui
rotation et zoom avant et arrière. Une solution open source pour cela est impressionner.js.
Grâce à impressionner.js you vous a prendre une moderne frais présentations.
Mais impress.js vous oblige à écrire votre présentation en HTML, ce qui est ennuyeux, et le
le balisage n'est pas assez flexible pour vous permettre de réorganiser rapidement les choses des puces aux
titres, etc.
Vous devez également positionner chaque diapositive séparément, et si vous insérez une nouvelle diapositive dans le
milieu, vous devez repositionner toutes les diapositives qui suivent.
Aéroglisseur!
Donc, ce que je veux, c'est un outil qui prend la puissance, la flexibilité et la commodité de
reStructuredText et me permet de générer des présentations panoramiques, de rotation et de zoom avec
impress.js, sans avoir à repositionner manuellement chaque diapositive si je réorganise un peu
de la présentation. Je n'en ai pas trouvé, alors j'ai fait Hovercraft.
La puissance de l'aéroglisseur vient de la combinaison de la commodité de reStructuredText avec le
cool d'impress.js, ainsi qu'une solution flexible et puissante pour positionner les diapositives.
Il existe quatre façons de positionner les diapositives :
1. Positionnement absolu : vous ajoutez simplement les coordonnées X et Y à une diapositive, en pixels.
Faire seulement cela ne sera pas amusant, mais quelqu'un pourrait en avoir besoin.
2. Positionnement relatif : En spécifiant x et/ou y avec un r de départ, vous spécifiez
la distance par rapport à la diapositive précédente. En utilisant cette forme de positionnement, vous pouvez
insérez une diapositive et les autres diapositives se déplaceront simplement pour faire de la place à la nouvelle diapositive.
3. Automatiquement : si vous ne spécifiez aucune position, la diapositive se terminera de la même manière
distance de la diapositive précédente comme la diapositive précédente était de sa diapositive précédente.
La valeur par défaut est de déplacer 1600px vers la droite, ce qui signifie que si vous ne fournissez aucun
positions du tout n'importe où dans la présentation, vous obtenez l'ennuyeux standard
présentation glisser vers la gauche.
4. Avec un chemin SVG : Dans ce dernier mode de positionnement, vous pouvez prendre un chemin SVG d'un
Document SVG et collez-le dans la présentation, et cette diapositive + toutes les diapositives
suivant qui n'a pas de positionnement explicite sera positionné sur ce chemin. Ceci peut
être un peu compliqué à utiliser, mais peut créer des résultats impressionnants, tels que le positionnement du
diapositives comme Python serpentant ou similaire.
Aéroglisseur! comprend également impression-console, une console de présentation qui vous montrera votre
les notes, les aperçus des diapositives et l'heure, des outils essentiels pour toute présentation.
EN UTILISANT AÉROGLISSEUR!
Vous pouvez soit utiliser Hovercraft! de générer la présentation au format HTML dans un répertoire cible,
ou vous pouvez laisser Hovercraft! servir la présentation à partir de son serveur Web intégré.
Ces derniers présentent plusieurs avantages. La première est que la plupart des navigateurs Web seront très réticents à
ouvrir des fenêtres contextuelles à partir des pages servies à partir du système de fichiers c'est une mesure de sécurité qui
peut être modifié, mais il est plus facile de simplement pointer le navigateur vers http://localhost: 8000
à la place.
Le deuxième avantage est que l'aéroglisseur ! surveillera les fichiers sources de la présentation,
et s'ils sont modifiés Aéroglisseur ! générera à nouveau la présentation automatiquement.
De cette façon, vous n'avez pas besoin d'exécuter Hovercraft ! chaque fois que vous enregistrez un fichier, il vous suffit de
actualisez le navigateur.
Paramètres
aéroglisseur [-h] [-t MODÈLE] [-c CSS] [-une] [-s] [-n] [-p PORT]
[ ]
Arguments de position:
Le chemin d'accès au fichier de présentation reStructuredText.
Le répertoire dans lequel la présentation est enregistrée. Sera créé si ce n'est pas le cas
exister. Si vous ne spécifiez pas de targetdir Hovercraft! commencera à la place un
serveur Web et servir la présentation à partir de ce serveur.
Arguments facultatifs :
-h, --Aidez-moi
Montrez cette aide.
-t MODÈLE, --modèle MODÈLE
Spécifiez un modèle. Doit être un fichier .cfg, ou un répertoire avec un modèle.cfg
déposer. S'il n'est pas fourni, il utilisera un modèle par défaut.
-c css, --css CSS
Un fichier CSS supplémentaire pour la présentation à utiliser. Voir aussi le :css: Paramétres
de la présentation.
-une, --console automatique
Ouvrez la console du présentateur automatiquement. Ceci est utile lorsque vous répétez
et s'assurer que les notes du présentateur sont correctes. Vous pouvez également le définir en
ayant :console automatique: oui premier dans la présentation.
-Oui, --skip-aide
Ne pas afficher la fenêtre contextuelle d'aide initiale.
-n, --ignorer-notes
N'incluez pas les notes du présentateur dans la sortie.
-p port, --Port PORT
L'adresse et le port que le serveur utilise. Ex 8080 ou 127.0.0.1:9000. Valeurs par défaut
à 0.0.0.0: 8000.
Conçus in modèles
Il y a deux modèles qui viennent avec Hovercraft ! L'un s'appelle défaut et sera utilisé
sauf si vous spécifiez un modèle. C'est le modèle que vous utiliserez la plupart du temps.
Le second s'appelle simple et il n'a pas de console de présentation. Ce modèle est
particulièrement utile si vous le combinez avec le --ignorer-notes paramètre pour préparer une version
de votre présentation à mettre en ligne.
FABRICATION PRESENTATIONS
A noter on terminologie
Traditionnellement, une présentation est composée de diapositives. Les appeler "diapositives" n'est pas vraiment
pertinents dans un contexte impress.js, car ils peuvent se chevaucher et ne glissent pas nécessairement. Les
le nom « étapes » est meilleur, mais il est aussi plus ambigu. C'est pourquoi impress.js utilise les termes
« slide » et « step » signifient la même chose, tout comme Hovercraft !
Aéroglisseur! syntaxe
Les présentations sont des fichiers reStructuredText. Si vous lisez cette documentation du
code source, alors vous regardez déjà un document reStructuredText.
C'est assez simple, tu soulignes les en-têtes pour les marquer comme en-têtes :
Cela devient un h1
=================
Et c'est un h2
-------------
Les différentes manières de les souligner ne veulent rien dire, au contraire leur ordre est
pertinent, donc le premier type de soulignement rencontré dans le fichier fera un niveau 1
titre, le second type un titre de niveau 2 et ainsi de suite. Dans ce fichier = est utilisé pour le niveau 1,
et - pour le niveau 2.
Vous pouvez également marquer le texte comme italique or goupille, avec *Célibataire astérisques* or **double astérisques**
respectivement.
Vous pouvez également avoir des listes à puces :
* Puce 1
* Puce 1.1
* Puce 2
* Puce 3
Et des listes numérotées :
1. Point 1
1.1. Point 1.1
2. Point 2
3. Point 3
Vous pouvez inclure des images :
.. image :: chemin/vers/image.png
:hauteur: 600px
:largeur: 800px
Comme vous le voyez, vous pouvez également spécifier la hauteur et la largeur et les charges d'autres paramètres, mais ils
sont tous facultatifs.
Et vous pouvez marquer le texte comme étant préformaté. Pour ce faire, terminez la ligne précédente par
doubles deux-points, ou avoir une rangée de doubles-points par elle-même :
::
Ce code ici sera préformaté
et affiché avec une police à espacement fixe
et tous les espaces préservés.
Si vous souhaitez ajouter du code source, vous pouvez utiliser le code directive et obtenir la syntaxe
mise en évidence:
..code :: python
def some_example_code(foo) :
retourner foo * foo
La coloration syntaxique est effectuée par Pygment et prend en charge beaucoup, beaucoup de langues.
Vous êtes également susceptible de vouloir mettre un titre sur la présentation. Vous le faites en ayant un ..
Titre:: déclaration avant la première diapositive :
.. title :: Ceci est le titre de la présentation
Ce sont les choses les plus importantes que vous aurez besoin de savoir sur reStructuredText pour faire
présentations. Il y a beaucoup plus à savoir, et beaucoup de fonctionnalités avancées comme les liens,
notes de bas de page, et plus encore. Il est en fait suffisamment avancé pour que vous puissiez écrire tout un livre en elle,
mais pour tout ce que vous devez lire le Documentation.
Externe fichiers
Tout fichier image référencé dans la présentation par un chemin relatif sera copié dans le
répertoire cible, en gardant son chemin relatif vers la présentation. Idem pour les images
ou les polices référencées dans les fichiers CSS utilisés par la présentation ou le modèle.
Les images ou les polices référencées par des chemins absolus ou des URI ne seront pas copiées.
Stylisme votre Présentation
Le css inclus par le modèle par défaut est constitué de trois fichiers.
· impressionConsole.css contient le CSS nécessaire au fonctionnement de la console de présentation,
· surligner.css contient un style par défaut pour la coloration syntaxique du code, comme autrement
serait beaucoup de travail. Si vous n'aimez pas les couleurs ou les styles par défaut dans le
en surbrillance, c'est le fichier que vous devez copier et modifier.
· aéroglisseur.css, qui ne comprend que le strict minimum : il masque le fallback impress.js
message, le présentateur note et définit une valeur par défaut utile d'avoir une largeur de pas
1000 pixels de large.
Pour cette raison, vous souhaitez inclure votre propre CSS pour styliser vos diapositives. Pour inclure un CSS
fichier vous ajoutez un :css:-champ en haut de la présentation :
:css: css/présentation.css
Vous pouvez également éventuellement spécifier que le CSS ne doit être valide que pour certains médias CSS :
:css-screen,projection : css/presentation.css
:css-print:css/print.css
Vous pouvez spécifier n'importe quel nombre de fichiers css de cette manière.
Vous pouvez également ajouter un fichier CSS supplémentaire via un paramètre de ligne de commande :
aéroglisseur --extra-css=my_extra.css presentationfile.rst outdir/
Stylisme a groupe de neurones diapositive
Si vous voulez avoir un style spécifique pour une diapositive spécifique, c'est une bonne idée de lui donner
faites glisser un identifiant unique :
:id : l'identifiant de la diapositive
Vous pouvez ensuite styliser cette diapositive spécifiquement avec :
div#le-slide-id {
/* CSS personnalisé ici */
}
Si vous ne lui donnez pas d'identifiant spécifique, il obtiendra un identifiant basé sur son numéro de séquence. Et
cela signifie que l'ID de la diapositive changera si vous insérez ou supprimez les diapositives qui l'ont précédée,
et dans ce cas, vos styles personnalisés de cette diapositive cesseront de fonctionner.
Portable présentations
Depuis Aéroglisseur ! génère des présentations HTML5, vous pouvez utiliser n'importe quel ordinateur doté d'un
navigateur moderne installé pour afficher ou afficher la présentation. Cela vous permet à la fois de mettre en place
la présentation en ligne et d'utiliser un ordinateur prêté pour votre conférence ou client
présentation.
Lorsque vous voyagez, vous ne savez pas quel équipement vous devez utiliser lorsque vous montrez votre
présentation, et il est étonnamment courant de rencontrer un projecteur qui refuse de parler à
ton ordinateur. Il est aussi très facile d'oublier votre dongle si vous avez un MacBook, et là
il y a même eu des cas d'ordinateurs devenus complètement noirs et morts lorsque vous les connectez à
un projecteur, même si tous les autres ordinateurs semblent fonctionner correctement.
Le principal moyen de vous assurer que votre présentation est portable est de l'essayer sur différents
navigateurs et différents ordinateurs. Mais ce dernier peut être irréalisable, tout le monde n'a pas les deux
Ordinateurs Windows, Linux et OS X à la maison. Pour vous aider à rendre vos présentations portables, il est
une bonne idée de définir vos propres @font-face et de les utiliser, ainsi vous êtes sûr que la cible
navigateur utilisera les mêmes polices que vous. Aéroglisseur! trouvera automatiquement @font-face
définitions et copiez les fichiers de polices dans le répertoire cible.
impressionner.js des champs
La documentation sur impress.js est contenue sous forme de commentaires dans le demo html filet. Ce n'est pas
toujours très clair, voici donc un bref résumé pour plus de commodité.
Les différents champs de données qu'impress.js utilisera dans 0.5.3, qui est la version actuelle,
sont les suivants:
· données-transition-durée: Le temps qu'il faudra pour passer d'une diapositive à une autre.
La valeur par défaut est 1000 (1 seconde). Ceci n'est valable que sur la présentation dans son ensemble.
· point de vue des données: Contrôle la "perspective" dans les effets 3D. La valeur par défaut est 500.
Le régler sur 0 désactive les effets 3D.
· données-x: La position horizontale d'une diapositive en pixels. Peut être négatif.
· données-y: La position verticale d'une diapositive en pixels. Peut être négatif.
· échelle de données: définit l'échelle d'une diapositive, ce qui crée le zoom. La valeur par défaut est 1. A
une valeur de 4 signifie que la diapositive est quatre fois plus grande. En bref : abaisser signifie zoomer,
plus élevé signifie un zoom arrière.
· données-rotation-z: rotation d'une diapositive sur l'axe des x, en degrés. Cela provoquera le
glissière à tourner dans le sens des aiguilles d'une montre ou dans le sens inverse des aiguilles d'une montre.
· rotation des données: Le même que données-rotation-z.
· données-rotation-x: rotation d'une diapositive sur l'axe des x, en degrés. Cela signifie que vous êtes
déplacer la diapositive dans une troisième dimension par rapport aux autres diapositives. C'est généralement
effet cooll, s'il est utilisé correctement.
· données-rotation-y: rotation d'une diapositive sur l'axe des x, en degrés.
· données-z: Ceci contrôle la position de la glissière sur l'axe z. Définir cette valeur sur
-3000 signifie qu'il est placé à -3000 pixels. Ceci n'est utile que lorsque vous utilisez
données-rotation-x or données-rotation-y, sinon cela donnera seulement l'impression que le
slide est rendu plus petit, ce qui n'est pas vraiment utile.
Aéroglisseur! spécialités
Aéroglisseur! a des manières spécifiques d'utiliser reStructuredText. Tout d'abord, le
reStructuredText "transition" est utilisé pour marquer la séparation entre les différentes diapositives ou
pas. Une transition est simplement une ligne avec quatre tirets ou plus :
----
Vous n'êtes pas obligé d'utiliser des tirets, vous pouvez utiliser n'importe lequel des caractères utilisés pour souligner
titres, = - ` : . ' " ~ ^ _ * + #. Et tout comme les titres de largeur, en utilisant différents
caractères indique différents "niveaux". De cette façon, vous pouvez créer une hiérarchie
présentation, avec étapes et sous-étapes. Cependant, impress.js ne prend pas en charge cela, donc cela
n'est utile que si vous créez vos propres modèles qui utilisent une autre bibliothèque Javascript, par exemple
(ici) Révéler.js. Si vous avez plus d'un niveau de transition avec les modèles inclus
avec Hovercraft, la présentation résultante peut se comporter étrangement.
Tous les champs reStructuredText sont convertis en attributs sur la balise actuelle. La plupart de
ceux-ci seront généralement ignorés par le rendu en HTML, mais il y a deux endroits où
les balises feront une différence, et c'est en les mettant en premier dans le document, ou
d'abord sur une diapositive.
Tous les champs que vous placez en premier dans un document seront rendus en attributs sur le
impressionner.js <div> . Ceci n'est actuellement utilisé que pour définir la durée de transition avec
données-transition-durée.
Tous les champs que vous placez en premier dans une diapositive seront rendus en attributs sur la diapositive <div> .
Ceci est principalement utilisé pour définir la position/zoom/rotation de la diapositive, soit avec le
données-x, données-y et d'autres paramètres impress.js, ou le chemin-aéroglisseur réglage, plus à ce sujet
plus tard.
Aéroglisseur! commencera à faire la première diapositive lorsqu'elle rencontrera pour la première fois une transition
ou un en-tête. Tout ce qui précède appartiendra à la présentation dans son ensemble.
Une présentation peut donc ressembler à ceci :
: durée de la transition des données : 2000
:skip-help: vrai
.. titre : Titre de la présentation
----
Ceci est la première diapositive
=======================
Voici un texte.
----
:données-x: 300
:données-y: 2000
Ceci est la deuxième diapositive
========================
#. Ici nous avons
#. Une liste numérotée
#. ça deviendra correct
#. Numéros automatiquement
Relatif positionnement
Aéroglisseur! vous donne la possibilité de positionner les diapositives les unes par rapport aux autres. Tu fais cela
en commençant les coordonnées par "r". Cela positionnera la diapositive 500 pixels vers la droite
et mille pixels au-dessus de la diapositive précédente :
:données-x:r500
:données-y: r-1000
Les chemins relatifs vous permettent d'insérer et de supprimer des diapositives et d'ajuster d'autres diapositives
automatiquement. C'est probablement le moyen de positionnement le plus utile.
Automatique positionnement
Si vous ne spécifiez pas d'attribut, les paramètres de la diapositive seront les mêmes que le précédent
faire glisser. Cela signifie que si vous avez utilisé un positionnement relatif, la diapositive suivante déplacera le
même distance.
Cela donne un mouvement linéaire et vos diapositives se retrouveront en ligne droite.
Par défaut, le mouvement est de 1600 pixels vers la droite, ce qui signifie que si vous ne
positionnez toutes les diapositives, vous obtenez une présentation standard où les diapositives seront simplement
glisser de droite à gauche.
SVG Chemins
Aéroglisseur! prend en charge le positionnement des diapositives le long d'un chemin SVG. C'est pratique, comme tu peux
créer un dessin dans un logiciel qui prend en charge SVG, puis copier-coller ce chemin de dessins
dans votre présentation.
Vous spécifiez le chemin SVG avec le :chemin de l'aéroglisseur: champ. Par exemple:
:hovercraft-path: m275,175 v-150 a150,150 0 0,0 -150,150 z
Chaque diapositive suivante qui n'a pas de positionnement explicite sera placée sur ce
chemin.
Il y a certaines choses auxquelles vous devez faire attention lorsque vous utilisez des chemins SVG.
Relatif et absolu les coordonnées
En SVG, les coordonnées peuvent être soit absolues, avec une référence à l'origine de la page ; ou
relatif, qui fait référence au dernier point. Aéroglisseur! peut gérer les deux, mais quoi
il ne peut pas très bien gérer est un mélange d'entre eux.
Plus précisément, si vous prenez un chemin SVG qui commence par un mouvement relatif et extrayez
qu'à partir du document SVG, vous perdrez le contexte. Toutes les coordonnées ultérieures doivent alors
aussi être relatif. Si vous avez une coordonnée absolue, vous regagnez soudainement le contexte,
et tout après la première coordonnée absolue sera égaré par rapport à la
points qui précèdent.
Le plus notable, le logiciel open source "Inkscape" mélangera absolu et relatif
coordonnées, si vous lui permettez d'utiliser des coordonnées relatives. Il faut donc entrer dans
ses paramètres et décochez la case qui vous permet d'utiliser des coordonnées relatives. Cette
force Inkscape à enregistrer toutes les coordonnées comme absolues, ce qui fonctionnera correctement.
Accueille position
Par défaut la position de départ du chemin, et donc la position de départ du premier
diapositive, sera quelle que soit la position de départ aurait été si la diapositive n'avait pas de positionnement
du tout. Si vous souhaitez modifier cette position, incluez simplement :données-x: or :données-y: champs.
Le positionnement relatif et absolu fonctionnera ici.
Dans tous les cas, le premier m or M la commande du chemin SVG est effectivement ignorée, mais vous
doivent l'inclure de toute façon.
SVG se transforme
SVG vous permet de tracer un chemin puis de le transformer. Aéroglisseur! n'a aucun soutien pour ces
transformations, donc avant d'extraire le chemin, vous devez vous assurer que le logiciel SVG ne
utiliser des transformations. Dans Inkscape, vous pouvez le faire par la commande "Simplifier".
Autre SVG formes
Aéroglisseur! ne prend pas en charge les autres formes SVG, juste le chemin. C'est parce que l'organisation
les diapositives en carrés, etc., sont de toute façon assez simples et les formes peuvent être transformées en chemins.
Habituellement, dans le logiciel, vous devrez sélectionner la forme et dire à votre logiciel de créer
dans un chemin. Dans Inkscape, transformer un objet en chemin signifie généralement que
tout le chemin est fait de courbes CubicBezier, qui sont inutilement complexes. En utilisant le
La commande "Simplifier" dans Inkscape est généralement suffisante pour transformer les formes en chemins.
Mise à l'échelle de la forme
Aéroglisseur! mettra à l'échelle le chemin de sorte que toutes les diapositives qui doivent s'adapter dans le chemin seront
s'insérer dans le chemin. Si vous avez donc plusieurs chemins dans votre présentation, ils pas
conservent leurs tailles relatives, mais seront redimensionnées pour que les diapositives s'adaptent. Si vous avez besoin d'avoir le
les formes conservent leurs tailles relatives, vous devez les combiner en un seul chemin.
Exemples
Pour voir comment utiliser Hovercraft ! en pratique, trois exemples de présentations sont inclus
avec l'aéroglisseur !
aéroglisseur.rst
La présentation de démonstration que vous pouvez voir sur http://regebro.github.com/hovercraft
tutoriel.rst
Un guide étape par étape des fonctionnalités de l'aéroglisseur !
positions.première
Une explication de l'utilisation des fonctions de positionnement.
CONCEPTION VOTRE PRESENTATIONS
Il existe plusieurs astuces pour faire des présentations. Je ne prétends certainement pas être un
expert, mais voici quelques conseils pour les débutants.
Prenez it Easy
N'allez pas trop fort sur le zoom. Avoir une différence entre deux diapositives à l'échelle de plus
que 5 est rarement beau. Cela ferait un bel effet de zoom sympa s'il
l'a fait, mais ce n'est pas pour cela que les navigateurs sont conçus, donc ce ne sera pas le cas.
Et les effets 3D peuvent être vraiment cool s'ils sont bien utilisés. Mais pas tout le temps, ça devient fatiguant
pour le public.
Essayez, si vous le pouvez, d'utiliser les effets de zoom et 3D lorsqu'ils ont du sens dans la présentation.
Vous pouvez par exemple mentionner les sujets principaux sur une diapositive, puis zoomer sur chaque sujet
lorsque vous en discutez plus en détail. De cette façon, les effets aident à clarifier la présentation,
plutôt que de s'en détourner.
Personnalisé polices
Les navigateurs ont tendance à rendre les choses subtilement différemment.
Ils ont également des polices par défaut différentes et des systèmes d'exploitation différents ont des
implémentations des mêmes polices. Donc, pour vous assurer d'avoir autant de contrôle sur le
conception que possible, vous devez toujours inclure des polices avec la présentation. Une bonne source
pour les polices gratuites sont Google Polices Web. Ces polices sont gratuites et open source, vous pouvez donc utiliser
sans frais et sans risque d'être poursuivi. Ils peuvent également être téléchargés ou inclus
en ligne.
Vitrine vs Téléchargé
Si vous faites une présentation qui sera exécutée sur votre ordinateur lors d'une conférence ou
rendez-vous client, téléchargez toujours les polices et intégrez-les à la présentation.
Mettez-les dans un dossier appelé polices sous le dossier où se trouve votre présentation.
Vous devez également définir la police-famille dans votre CSS. Fonte Écureuilgénérateur de polices Web de
vous fournira une boîte à outils indépendante de la plate-forme pour générer à la fois la police Varius
formats et le CSS.
Si la présentation est en ligne uniquement, vous pouvez mettre un @comprendre-déclaration dans votre CSS à
incluez directement les polices Web de Google :
@importer l'url(http://fonts.googleapis.com/css?family=Libre+Baskerville|Racing+Sans+One|Satisfaire);
Mais ne l'utilisez pas pour des choses que vous devez afficher sur votre ordinateur, car cela vous oblige à
avoir accès à internet.
Tests avec différent navigateurs
Si vous mettez la présentation en ligne, testez-la avec quelques navigateurs majeurs, pour
assurez-vous que rien ne se casse et que tout semble toujours bon. Non seulement y a-t-il subtil
différences dans la façon dont les choses peuvent être positionnées, différents navigateurs sont également bons pour
différentes choses.
J'ai testé certains navigateurs, tous sur Ubuntu, et il est probable qu'ils se comportent différemment sur
d'autres systèmes d'exploitation, vous devez donc essayer par vous-même.
Firefox
Firefox 18 est assez lent à utiliser avec impress.js, en particulier pour les trucs 3D, il peut donc avoir
mouvements très saccadés de toboggan en toboggan. Il garde le texte en bon état, peu importe comment
beaucoup vous zoomez. D'un autre côté, il refuse de redimensionner le texte à l'infini, donc si vous redimensionnez trop
beaucoup de personnages ne grossiront pas, ils commenceront plutôt à se déplacer.
Firefox 19 est meilleur, mais pour les trucs 3D, c'est encore un peu lent.
Chrome
Chrome 24 est rapide, mais ne redessine pas le texte dans différentes tailles, mais crée à la place un
image d'eux et redimensionnez-les, résultant en la diapositive précédente ayant un flou pixelisé
effet.
Épiphanie
Epiphany 3.4.1 est comparable à Firefox 19, peut-être un peu plus fluide, et le texte a l'air
bon. Mais il a des bugs dans la façon dont il gère les données 3D, et la barre d'emplacement est visible dans
mode plein écran, ce qui le rend moins adapté à tout type de présentation.
MODÈLES
Heureusement, dans la plupart des cas, vous n'avez pas besoin de créer votre propre modèle, par défaut
Le modèle est très simple et la plupart des choses que vous devez faire sont réalisables avec CSS. Cependant, je
Je ne veux pas d'aéroglisseur ! installer un mur là où il n'est pas assez flexible pour vos besoins, alors
J'ai ajouté un support pour créer vos propres modèles.
Vous devez créer votre propre modèle si vous n'êtes pas satisfait du HTML que Hovercraft !
génère, par exemple si vous devez utiliser une autre version de HTML ou si le
reStructuredText que vous utilisez n'est pas rendu d'une manière qui vous est utile.
Bien que si vous n'êtes pas satisfait du HTML généré à partir du reStructuredText, cela pourrait
très bien être un bogue, alors ouvrez un problème sur Github pour discussion.
Aéroglisseur! génère des présentations en convertissant le reStructuredText en XML, puis
utilisant XSLT pour traduire le XML en HTML.
Les modèles sont des répertoires avec un fichier de configuration, un fichier modèle XSL et n'importe quel nombre
de CSS, JS et autres fichiers de ressources.
Votre modèle paramétrage filet
Le fichier de configuration s'appelle normalement template.cfg, mais si vous avez plusieurs
fichiers de configuration dans un répertoire de modèle, vous pouvez spécifier celui à utiliser par
en spécifiant le chemin complet du fichier de configuration. Cependant, si vous spécifiez simplement le
répertoire des modèles, modèle.cfg sera utilisé.
Les fichiers modèles sont au format configparser, qui est un format étendu de style ini. Elles sont
très simple, et n'ont qu'une seule section, [aéroglisseur]. Toutes les autres sections seront ignorées.
La plupart des paramètres sont des listes qui souvent ne tiennent pas sur une seule ligne. Dans ce cas, vous pouvez
diviser la ligne sur plusieurs lignes, mais en indentant les lignes. Le montant de l'indentation
ne fait aucune différence, sauf sur le plan esthétique.
Les paramètres de la section [hovercraft] sont :
modèle Le nom du modèle xsl.
css A liste of CSS noms de fichiers séparé by espace. Ces fichiers
sera inclus dans le fichier final avec "all" comme spécification de support.
css- A liste of CSS noms de fichiers séparé by espace. Ces fichiers
sera inclus dans le fichier final avec le média indiqué dans le paramètre. Donc
les fichiers répertoriés pour le paramètre "css-print" obtiendront "print" comme support
spécification et une clé comme "css-screen,print" renverra le média
"impression d'écran".
en-tête js A liste of noms de fichiers séparé by espace. Ces fichiers
seront inclus dans le fichier cible en tant que liens de script d'en-tête.
js-corps A liste of noms de fichiers séparé by espace. Ces fichiers
sera inclus dans le fichier cible sous forme de liens de script à la fin du fichier. Les
les fichiers impress.js, impressConsole.js et hovercraft.js doivent généralement être
inclus ici.
ressource A liste of noms de fichiers séparé by whitespace qui sera be
copiés dans le répertoire cible, mais rien d'autre n'est fait avec eux. Images et
les polices utilisées par CSS seront copiées de toute façon, mais d'autres ressources peuvent être ajoutées ici.
Un exemple:
[aéroglisseur]
modèle = modèle.xsl
css = css/écran.css
css/impressConsole.css
css-print = css/print.css
js-header = js/dateinput.js
js-corps = js/impress.js
js/impressConsole.js
js/aéroglisseur.js
ressource = images/back.png
images/forward.png
images/haut.png
images/bas.png
Votre modèle filet
Le fichier spécifié avec le modèle paramètres est le modèle XSLT réel qui
effectuer la traduction de XML en HTML.
La plupart du temps, vous pouvez simplement copier le fichier modèle par défaut dans
aéroglisseur/templates/default/template.xsl et le modifier. XSLT est très complexe, mais
modifier les modèles HTML est assez simple tant que vous n'avez pas à toucher
n'importe lequel des Mots clés.
De plus, le code HTML généré est compatible XHTML et assez simple, donc pour le
dans la plupart des cas, tout ce dont vous auriez besoin pour générer une autre version de HTML, par exemple strict
XHTML, serait de changer le doctype.
Mais si vous devez ajouter ou modifier le code HTML généré principal, vous pouvez ajouter et modifier le code HTML
instructions dans ce fichier principal comme vous le souhaitez. Voyez par exemple comment fonctionne la petite popup d'aide
ajouté au bas du code HTML.
Si vous voulez changer la façon dont le reStructuredText est rendu, les choses deviennent légèrement plus
complexe. Les règles XSLT qui convertissent le XML reStructuredText en HTML sont contenues dans un
fichier séparé, reST.xsl. Pour la plupart, vous pouvez simplement l'inclure dans le fichier modèle
avec le code suivant:
Votre Ressource: une partie ici n'est pas une partie de XSLT, mais une partie de Hovercraft ! Il raconte le
traduction XSLT que le fichier spécifié ne doit pas être recherché sur le système de fichiers, mais
en tant que ressource de package Python. Actuellement le modèles/reST.xsl le fichier est le seul XSLT
importation de ressources disponible.
Si vous devez modifier la façon dont reStructuredText est rendu, vous devez en faire une copie
fichier et modifiez-le. Vous devez ensuite faire une copie du modèle principal et modifier le
référence à votre fichier XSLT modifié.
Aucun des fichiers XSLT n'a besoin d'être copié sur la cible et ne doit pas être répertorié comme un
ressource dans le fichier de configuration du modèle.
Utiliser l'aéroglisseur en ligne à l'aide des services onworks.net