Cadre de base pour les présentations utilisant HTML5 + javascript

100

Connaissez-vous un cadre pour faire des présentations en utilisant uniquement les technologies HTML5 et javascript?
Je ne parle pas des fonctionnalités "d'exportation" de divers logiciels de présentation (présentation PowerPoint ou OOo).

Quelques exigences pour les présentations faites avec ce «cadre»:

  • profiter des dernières fonctionnalités HTML5 (audio, vidéo, canevas?)
  • idem avec CSS3 (prise en charge des polices, dégradé, ombres, transitions et transformations)

S'il n'y a rien de tel, des exemples de bonnes présentations ou des pointeurs sur le sujet seraient appréciés.

Edit: Trouvé un bel exemple, HTML5 - développement Web au niveau suivant .

javascript html presentation Brian Clozel
la source
2
deck.js également sur GitHub: imakewebthings.github.com/deck.js
Tammo B.
13
38+ votes positifs, 26 signets, mais fermé? Au risque de représailles du modérateur, je dois dire qu'il y a quelque chose qui ne va pas avec la modération ici. J'ai vu une douzaine de questions intéressantes fermées sans raison valable.
Ben Lesh
4
Cela semble plutôt indiquer un problème de modération sur le site, être déconnecté de l'audience du site. Franchement, c'est aussi un signe que stackoverflow.com a peut-être "sauté le requin".
Ben Lesh
3
@blesh Vous obtenez une assez bonne description dans la raison de fermeture ci-dessous. Notez que ces raisons proches existent depuis le tout début du site, et il est clairement codifié dans la FAQ que ces types de questions ne sont pas autorisés, donc cela ne devrait pas être une surprise. Avec le volume de trafic que SO reçoit, il y a des tonnes de ce genre de questions qui passent sous le radar, mais cela ne justifie pas leur existence. Vous pouvez en parler sur méta, si vous le souhaitez, mais je ne pense pas que les gens seront en désaccord avec la raison proche .
casperOne
3
@IvoFlipse: la question n'est pas de savoir si les réponses sont des réponses «de qualité» par une métrique vague et complètement subjective, mais si elles sont utiles aux gens. A en juger par les votes, la question et la réponse sont éminemment utiles à de nombreuses personnes.
static_rtti

Réponses:

65

Landslide est une application assez soignée qui génère des diaporamas:

Deck.js est un autre beau projet; cette fois, les diapositives sont purement HTML / CSS / JS.

Mieux encore, impress.js s'appuie sur les transitions et transitions CSS3.

Brian Clozel
la source
J'ai téléchargé les fichiers Landslide, mais étant le noob que je suis, je ne sais pas trop comment l'utiliser. Les instructions de lecture me semblent grecques avec toutes les instructions de ligne de commande. Tout pointeur pour commencer serait apprécié. Merci
Sbhambry
1
@Saurabh: en supposant que vous ayez cloné à partir du dépôt git, exécutez python setup.py build, puis python setup.py installavec les privilèges root. Vous aurez maintenant la landslidecommande disponible, exécutez-la sous le samples/répertoire.
Ryan Li
@Ryan merci pour la réponse. Je lui donnerais une chance dès que possible. Merci!
Sbhambry
Vous pouvez utiliser strut.io comme interface graphique pour créer des présentations Impress.js et Bespoke.js.
Matt Crinklaw-Vogt
8

En tant qu'outil de présentation, j'utilise Reveal.js , c'est un outil de présentation très propre et moderne.

Il est fait à 100% avec HTML5 / CSS3 / JS, les fonctionnalités que j'aime le plus sont:

  • Transitions 3D comme CSS3 entre les diapositives
  • Vous pouvez créer des diapositives imbriquées - des diapositives verticales en diapositives horizontales
  • Prise en charge de la police
  • vous créez des liens internes entre les diapositives
  • Le code est joli, grâce à highlight.js
  • Vue d'ensemble et mode deux écrans avec Escet `` s ''

Je sais que vous ne le voulez pas vraiment, mais vous pouvez l'exporter au format PDF, et le fourcher sur github :)

Xavier
la source
2

Si vous souhaitez obtenir le support websocket et la possibilité de contrôler les présentations Deck.js via une application mobile Sencha 2.0 HTML5, vous pouvez essayer Robodeck .

jdcravens
la source
1

Cette bibliothèque est pour faire des présentations, des histoires et des publicités.

ConseilJS

Porizm
la source
0

En marge des réponses, vous pourriez également être intéressé par un contrôleur nodejs pour garder plusieurs téléspectateurs synchronisés les uns avec les autres.

controldesk.js

Neil
la source